Question

所以我想要完成的是<div id="box">左边和<div id="box2">右边在<div id="content">的容器内我必须提到它们不能是位置：绝对的;除非有办法确保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:left;和float:right;来实现，并将它们包含在另一个div中，这样其他元素就不会试图挤压它们（或确保甲板上的下一个元素上有clear:both;。在他们的包含div中（如果你使用的是div），使用overflow:auto自动展开它以适应这些div。确保您还为浮动div提供宽度，否则它们将自动展开以填充其父级的宽度。

Answer 2

你想“漂浮”你的div。在div上设置一个宽度，向左或向右浮动它们，并确保在它们之后清除它们，这样你就不会被其他元素无意中填充。在CSS类/ ID中使用如下所示的语句。

float:left;
width:WHATEVERpx;

...

float:right;
width:WHATEVERpx;

...

clear:both;

Answer 3

您正在寻找三栏布局。这比你想象的要复杂得多。您可以通过一个简单的示例轻松获得它，但如果您开始添加页眉或页脚并使列扩展内容，则会变得棘手。

我建议您阅读此article以获得一些想法。

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

3 个答案: