垂直对齐两个div，有偏移？答案

【问题标题】：Vertically align two divs, with offset?垂直对齐两个div，有偏移？
【发布时间】：2017-11-02 16:48:43
【问题描述】：

我有两列文本+图形。列需要垂直定位，以便第 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 列的开头有适当数量的空白行（或计算的上边距），但这似乎很尴尬，并且如果有一些则很难使用的线条是图形而不是文本。

【问题讨论】：

你能提供代码吗..？
@ankita patel：没有可提供的代码。我在问如何实现这种布局。

标签： html css vertical-alignment

【解决方案1】：

试试这个方法。

您可以在第一列中选择您的second child，我在此处将其标记为红色并给出position:relative。
在这里面我用position:absolute嵌套了第二列，这将always从第一列第二个孩子中取出position并给出top:0 希望对您有所帮助。

因此，假设您在第一列中有多个 li 并且您想要的所有内容，从您的第一列第三个子项开始，您的第二列第一个子项应该内联对齐。所以我所做的我选择了使用li:nth-child(3) 的第一列第三个孩子并分配了一个名为position: relative 的属性并将你的所有第二列 li 嵌套在其中（你的第一列第三个孩子）。现在我已将position: absolute 分配给您的第二列li。当您说位置：绝对时，它将从它的第一个非静态（例如：此处的相对）父级获取位置，这是您的第一列第三个子级。所以它将占据第一列第三个孩子的位置。最后给出top:0，它将占据第三个孩子的位置，从它的前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>

【讨论】：

这看起来正是我所需要的。不过，我不明白 col 2 的位置是如何确定的。你能再解释一下吗？
他将包含第二个 col 的 li div 放入 - 并设置属性 - .col2 { position: absolute;左：100%；顶部：0px； }
@Woody20 我已经解释了上面相同的内容（所以，让我们说部分），因为它在评论部分没有占用很多字符。我所做的只是根据您的第一列第三个孩子设置列位置。我已经在答案部分解释了上面相同的内容，如果有帮助，您可以看看。

【解决方案2】：

您可以使用两个 div 之类的东西，其中一个具有顶部边距

        ul {
          list-style-type: none;
        }
        .textA {
        float:left;
        }
        .textB {
        float:left;
        margin-top:58px;
        }

<html>
<body>
    <div class="textA">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
                    </ul>
    </div>
    <div class="textB">
        <ul>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
        </ul>
    </div>
    <script>
</script>
    <style>
 </style>
</body>
</html>

【讨论】：

感谢您的建议。尽管这几乎是正确的，但这取决于确切地知道“对齐”线的位置是什么（在您的示例中为 58 像素）。除非我们知道字体的特性，以及对齐线之前所有图形的确切大小，否则这不会起作用。如果用户没有使用相同的默认字体，或者已经覆盖了它，那么间距就会出错。
如果您不确切知道所需的高度，您可以尝试在 java 脚本中计算它 - 例如，您可以在 Jquery 中测量 div 高度： $elem.height(); - 给出没有填充、边框和边距的元素高度 $elem.innerHeight(); - 给出高度，包括填充 $elem.outerHeight(true); - 在 java 脚本中给出高度，包括填充、边框和边距：element.offsetHeight；这给出了元素的高度