我如何坐在彼此左右两个div

Question

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

这是一个直接链接,向您展示发生了什么.请记住,这是一个带有php主干的纯css布局

直接链接到问题

<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:left;和float:right;,并将它们包含在另一个div中,这样其他元素就不会试图挤压它们(或者确保甲板上的下一个元素有clear:both;它) .在他们的包含div中(如果你使用的是div),使用overflow:auto它来自动扩展它以适应那些div.确保您还给出浮动divsa宽度,否则它们将自动扩展以填充其父级的宽度.