您將如何設置該DIV布局（左對齊div左對齊，右對齊div右對齊）？

Question

我正在嘗試有2個單獨的DIV，一個具有右對齊內容（標簽），另一個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中的類在父元素中向左或向右對齊。