css - 您将如何设置此 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>

我真的只是将它放入一个空文件中，以确保它能正常工作。我知道这并不完全符合您的要求，但也许它会给您一些想法。

由于有人指责我提供了一种矫枉过正的解决方案，这里有一个使用 float 的更简单的解决方案:

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>