html - 垂直对齐两个div，有偏移量？

Question

我有两列文本+图形。列需要垂直放置，以便第 2 列的顶部与第 1 列中的特定行位于相同的位置。例如，

COLUMN 1
line 1.1
line 1.2 <-----> COLUMN 2
line 1.3         line 2.1
line 1.4         line 2.2
...

此处所需的对齐方式是第 2 列是从与第 1 列的第 1.2 行(在本例中)相同的垂直位置开始。正确的对齐方式在页面组成时已知。

实现此目的的一种方法是使用 2 列表，第 2 列在开头有适当数量的空行(或计算出的上边距)，但这看起来很尴尬，如果某些人难以使用的行是图形而不是文本。

Answer 1

试试这个方法。

1. 您可以在第一列中选​​择您的第二个 child ，我已在此处将其标记为红色并指定了一个position:relative。
2. 我在第二列中嵌套了一个 position:absolute ，它将总是从第一列的第二个 child 中获取 position 并给出顶部:0 希望这对您有所帮助。

因此，假设您的第一列中有多个 li 并且您想要的所有内容，从您的第一列第三个 child 到您的第二列第一个 child 应该是内联对齐的。所以我所做的是我使用 li:nth-child(3) 选择了第一列第 3 个子项并分配了一个名为 position: relative 的属性并将所有第 2 列 li 嵌套在里面它(你的第一列第三个 child )。现在我已将 position: absolute 分配给您的第二列 li。当您说 position: absolute 时，它​​将从它的第一个非静态(例如:这里是相对的)父级那里获取位置，这是您的第一列第三个 child 。所以它将占据第一列第三个 child 的位置。最后给定 top:0 它将占据第 3 个子位置并从其顶部 0 开始。

#wrapper {
  width:700px;
  clear:both;
}
.col1-ul{
    display: inline-block;
    float: left;
}
ul.col1-ul > li:nth-child(3) {
    background: red;
    position: relative;
}
.col2 {
    position: absolute;
    left: 100%;
    top: 0px;
}
li {
list-style: none;
}

<div id="wrapper">
  <div class="col1">
    <ul class="col1-ul">
    <li>COLUMN 1</li>
    <li>line 1.1</li>
    <li>line 1.2
      <div class="col2">
   <ul class="col2-ul">
       <li>COLUMN 2</li>
    <li>line 2.1</li>
    <li>line 2.2</li>
    </ul>
  </div>
  </li>
    <li>line 1.3</li>
    <li>line 1.4</li>
    </ul>
  </div>
  
</div>