css 垂直线与文本对齐

ldioqlga 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(137)

我正在练习用html/css编写不同的代码。我希望我能成功地编写这个代码，但是我卡住了。
我想点是对齐的大标题，并在电话模式下，图像超过文本，同时确保点保持对齐的标题。有人能帮助我吗？
Here is an image to be more specific.
先谢了。
我第一次尝试使线是一个图像，但很难对齐的文本那样。。我不知道如何做到这一点。

css

来源：https://stackoverflow.com/questions/75712583/vertical-line-aligned-to-text

1条答案

按热度按时间

cdmah0mi1#

好吧，我们试试这个

.lorem-list {
  counter-reset: counter;
  max-width: 600px;
  font-size: 16px;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}
.lorem-list * {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
.lorem-list *:after,
.lorem-list *:before {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
.lorem-list-item {
  --circle-width: 20px;
  --circle-color: red;
  --padding: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 0 0 var(--padding) var(--padding);
  gap: 20px;
  margin: 0;
}
@media (max-width: 599px) {
  .lorem-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: unset;
        -ms-flex-align: unset;
            align-items: unset;
  }
}
.lorem-list-item:before,
.lorem-list-item:after {
  content: '';
  position: absolute;
  background-color: var(--circle-color);
}
.lorem-list-item:before {
  width: var(--circle-width);
  height: var(--circle-width);
  left: 0;
  top: 0;
  border-radius: 50%;
}
.lorem-list-item:after {
  left: calc(var(--circle-width) / 2);
  top: calc(var(--circle-width) / 2);
  bottom: calc(var(--circle-width) / -2);
  width: 2px;
  margin-left: -1px;
}
.lorem-list-item:last-child {
  padding-bottom: 0;
}
.lorem-list-item:last-child:after {
  bottom: 0;
}
.lorem-list-item-title {
  grid-column: span 2;
  font-weight: 700;
  text-transform: uppercase;
}
.lorem-list-item-title:before {
  content: counters(counter, '.', decimal-leading-zero) ' ';
  counter-increment: counter;
}
@media (max-width: 599px) {
  .lorem-list-item-desc {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.lorem-list-item-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 16/9;
  background-color: #eee;
}
.lorem-list-item-img img {
  display: block;
  max-width: 100%;
}

<ul class="lorem-list">
  <li class="lorem-list-item">
    <div class="lorem-list-item-title">Lorem ipsum.</div>
    <div class="lorem-list-item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, consectetur impedit aspernatur esse labore quidem tempora sapiente animi corrupti doloribus sit quibusdam accusantium repellat id reiciendis blanditiis nulla! Aspernatur provident sunt tempora ad neque aperiam nobis deleniti officiis nulla totam!</div>
    <div class="lorem-list-item-img-wrapp">
      <div class="lorem-list-item-img">Image</div>
    </div>
  </li>
  <li class="lorem-list-item">
    <div class="lorem-list-item-title">Lorem ipsum.</div>
    <div class="lorem-list-item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, consectetur impedit aspernatur esse labore quidem tempora sapiente animi corrupti doloribus sit quibusdam accusantium repellat id reiciendis blanditiis nulla! Aspernatur provident sunt tempora ad neque aperiam nobis deleniti officiis nulla totam!</div>
    <div class="lorem-list-item-img-wrapp">
      <div class="lorem-list-item-img">Image</div>
    </div>
  </li>
</ul>

赞(0）回复(0）举报 2023-03-14

我来回答

css 垂直线与文本对齐

1条答案

相关问题

热门标签

最新问答