您将如何设置此DIV布局（左侧右对齐div，右侧左对齐Div）？

Question

我正在尝试使用2个单独的DIV，一个使用右对齐内容（标签），另一个使用左对齐内容（每个标签的内容）。

我希望让每个标签与其右边的子内容“连接”，这样如果它被上面的内容推下来，它们仍将保持在一起。

设置跨浏览器的此类布局的最佳方法是什么？ （我在下面提供了JPG。）

Answer 1

如果你在单独的div中实际拥有正确的对齐内容，那么对齐将会很棘手，特别是如果内容本质上是可变的并且高度易于改变。

非常基本的，这就是我要做的事情，以便右手功能总是与他们相关的左手内容对齐。你显然需要根据自己的喜好调整它。

CSS：

ul {
    list-style: none outside none;
    margin-left: 150px;
}

ul li h3{
    position: absolute;
}

ul li span {
    position: relative;
    display: block;
    width: 150px;
    text-align: right;
    left: -150px;
}

HTML：

<ul>
    <li>
        <h3><span>Feature 1</span></h3>
        <p>Content 1<br />Content 1</p>
    </li>
    <li>
        <h3><span>Feature 2</span></h3>
        <p>Content 2<br />Content 2</p>
    </li>
</ul>

我只是把它扔进一个空文件，只是为了确保它有效。我知道这不是你要求的，但也许它会给你一些想法。

由于我被指控提供矫枉过正的解决方案，这里只是使用花车更简单：

CSS：

.left, .right {
    float: left;
}

.left {
    clear: left;
    width: 150px;
    text-align: right;
}

HTML：

<div class="left">feature</div>
<div class="right">content<br />content</div>

<div class="left">feature</div>
<div class="right">content<br />content</div>

Answer 2

这在语义上是一个表，适用于HTML表格布局。虽然重要的是不使用表格进行非表格布局，但无论行数或列数如何，表格仍然是一个表格。在现实世界中，有两列和多行的表非常普遍。

Answer 3

似乎你也可以在父元素中左右对齐的div中有类。