如何将两个div元素分别放在左右两侧？

Question

我想要实现的目标是让 <div id="box"> 在 <div id="content"> 容器内左侧，<div id="box2"> 在右侧。需要注意的是它们不能使用 position:absolute;，除非有一种方法可以确保高度为 height:auto; 的 div 不会失去其高度，因为我发现 position:absolute; 似乎浮在其他内容上面。

这里是一个直接链接，展示了发生的情况。请记住，这是一个纯 CSS 布局，带有 PHP 后台。

问题的直接链接

<div id="content">
    <div id="box1">
<h2>Company Information</h2>
            <img src="images/photo-about.jpg" alt="" width="177" height="117" class="aboutus-img" />
            <p color="FF6600">
            some content here
            </p>
    </div>
<div id="clear"></div>
    <div id="box" style="width:350px;">
            <h2>Availability</h2>
            <p>
            some more content here
            </p>
    </div>
<div id="clear"></div>
        <div id="box2" style="width:350px;float:left;overflow: auto;">
            <h2>Our Commitment</h2>
            <p> 
              some content here
            </p>
        </div>
</div>

- Zeenjayli

---

你是想要一个固定宽度的布局还是自适应宽度的？ - Catfish

那个id为“box”的div怎么样？在两者之间？ - Chad Birch

内容正在使用 $_get 加载，该内容被设置为固定宽度/自适应高度布局。 - Zeenjayli

Answer 1

< p > float 的作用是使元素优先放置在其包含的 div 的最左边，以其他页面内联元素为代价。它最初是为了像图片一样与文本并排放置（这样文本就可以围绕它们）。

如果你想让两个元素并排浮动，可以使用 float:left; 和 float:right;，并将它们包含在另一个 div 中，以便其他元素不会试图挤压它们（或者确保下一个元素上有 clear:both;）。在它们的包含 div 中（如果您正在使用一个），使用 overflow:auto 自动扩展它以适应那些 div，同样也要给浮动的 div 设置一个宽度，否则它们将自动扩展到填充其父元素的宽度。

- dclowd9901

Answer 2

你想要“浮动”你的div。在div上设置宽度，将它们向左或向右浮动，并确保在它们后面清除，以免其他元素填充。在你的CSS类/ID中使用以下语句。

float:left;
width:WHATEVERpx;

...

float:right;
width:WHATEVERpx;

...

clear:both;

- Anthony Pegram

---

我尝试了那个方法，但它并没有按预期工作。box2 上的 float:right 使其向右浮动，但它却悬挂在 box 下面，而不是坐在旁边。 - Zeenjayli

盒子应向左浮动，box2 向右浮动。你的 <div id="clear"> 不应该在它们之间。另外，你在 HTML 中两次使用了那个 ID。每个 ID 应该在页面中只使用一次。如果需要重复使用，请改用 class。 - Anthony Pegram

但是在内容div之前，您需要浮动的div。请参阅@kgiannakakis。 - ANeves

Answer 3

您正在寻找一种三列布局。这比您想象的要复杂得多。如果您只使用一个简单的示例可能很容易实现，但是如果您开始添加页眉或页脚并使列随内容扩展，则会变得棘手。

我建议阅读这篇article以获取一些想法。

- kgiannakakis

---

我不认为那就是答案，我会在我的问题中发布一个链接。 - Zeenjayli

在这篇文章中，作者讨论了如何得出解决方案。你应该仔细阅读它。如果你需要快速答案，可以看看作者在文章末尾留下的例子：http://www.alistapart.com/d/holygrail/example_4.html（但还是要读完整篇文章）。 - ANeves