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

试试这种方式。

您可以在我在此处标记为红色的第一列中选择second child，然后选择position:relative。
在此内部我已使用position:absolute嵌套第二列，always从第一列第二个孩子获取position并获得top:0 我希望这会对你有所帮助。

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

Answer 2

你可以使用两个div之类的东西，其中一个有上边距

＆＃13;

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

＆＃13;

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

＆＃13;

垂直对齐两个div，带偏移量？

2 个答案: