css - 我如何让 2 个 div 彼此左右

Question

所以我想要完成的是坐 <div id="box">和 <div id="box2"> 的左边权在 <div id="content"> 的容器内我必须提到它们不能是 position:absolute;除非有办法确保 height:auto; div 不会失去它的高度，因为我的经验 position:absolute;似乎漂浮在其他内容之上。

这里有一个直接链接，可以向您展示正在发生的事情。请记住，这是一个带有 php 主干的纯 css 布局

Direct Link to Issue

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

Answer 1

float 的作用是让您的元素优先放置在其包含的 div 的最左边缘，而牺牲页面上的其他内联元素。它最初是为放置在文本旁边的图像之类的东西而设计的(这样文本就可以环绕它们)。

如果你想让两个元素彼此相邻 float ，你可以使用 float:left; 和 float:right; 来实现，并将它们包含在另一个 div 中所以其他元素不要试图挤在它们周围(或确保甲板上的下一个元素上有 clear:both; )。在它们包含的 div 中(如果您正在使用一个)，使用 overflow:auto 自动扩展它以适应这些 div。确保您还为 float div 指定了宽度，否则它们会自动扩展以填充其父级的宽度。