与文本对齐的垂直线

Question

我正在尝试在 html/css 中练习编码不同的东西。 我希望我能成功编写代码，但我被卡住了。

我希望点与大标题对齐，并且在电话模式下，图像会覆盖文本，同时确保点与标题保持对齐。有人可以帮我吗？

提前致谢。

我首先尝试使线条成为图像，但很难像那样对齐文本.. 我不知道该怎么做。

Answer 1

好的，让我们试试这个

.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;
}
@media (max-width: 599px) {
  .lorem-list-item-title {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
.lorem-list-item-title:before {
  content: counters(counter, '.', decimal-leading-zero) ' ';
  counter-increment: counter;
}
.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%;
}
@media (max-width: 599px) {
  .lorem-list-item-img {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}

<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>