Question

我希望看起来像一个典型的论坛帖子，其中一些用户信息位于帖子的左侧，然后是帖子本身。我使用两个div缠绕另一个div然后在css上使用float。我的问题是，另一个div，当浮动时，也想留在左边，而不是“紧挨着另一个div”。我在div上尝试了display:inline;，并将其更改为跨度。我最接近的是只有另一个div的顶部在正确的位置（当我不浮动这个div时，只有第一个）。想想典型的IPB帖子布局。如果这没有意义，这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<div id = "contentarea">
    <div class = "post">
        <div class = "head">
            <p class = "name">asrockw7</p>
        </div>
        <div class = "body">
            <p class = "title">On the Origin of Species</p>
            <p class = "content">Integer hendrerit lectus sit amet turpis facilisis quis lacinia nulla tempus. Aliquam vitae ante eu sem vestibulum scelerisque. Cras dui neque, auctor eget rhoncus non, pretium a justo. </p>
        </div>
        <div class = "clear">clear:both;</div>
        <div class = "allreplies">
            <div class = "reply">
                <p class = "name">Wafer</p>
                <p class = "content">Vestibulum nec turpis eu mi imperdiet porttitor. Fusce eget lorem libero, a imperdiet sem. Integer eleifend tincidunt condimentum. Nam id arcu nec lectus rhoncus sagittis.</p>
            </div>
            <div class = "reply">
                <p class = "name">Arondight</p>
                <p class = "content">Suspendisse non eros orci, a porttitor lacus. Donec vulputate viverra neque, quis sagittis eros suscipit vel.</p>
            </div>
        </div>
        <div class = "clear">clear:both;</div>
    </div>
</div>
</html>

<style type = "text/css">
.clear {
background:white;
clear:both;
}
#contentarea {
margin-top:50px;
margin-left:10px;
min-width:700px;
}
p{
font-family:"Lucida Console";
}
.post {
opacity:0.9;
background:blue;
padding:5px 10px 5px 10px;
}
.post .head {
background:red;
float:left;
}
.post .body {
background:green;
}

.post .allreplies {
background:yellow;
}
</style>

颜色只是为了能够区分每个部分。我认为这是因为body div不认为它适合head div旁边，所以它会下降。我可以指定一个明确的宽度和高度，并使body div知道它可以适合但对于具有大分辨率监视器的人来说这将是不好的。此时，我很想使用<table>。

这些都是由PHP生成的，只是想先让布局正确。

TL; DR：基本上我希望head div和body div相邻，而不是让body div掉下来，因为它不认为它适合。

Answer 1

您可以将x%宽度添加到.head，将(100-x)%宽度添加到.body。此外，您可以像之前一样将float:left添加到.body。 See fiddle.

现在你的方式是，.head元素占据了左上方的空间，将.body（未浮动）中的内容推向右侧。

如果未指定浮动div的宽度，则.body div的宽度是the width of the content inside the div和the width of the parent的最小值。在这种情况下，内容的“宽度”大于父元素的宽度，因此.body div被推送到自己的水平线。如果您float:left和.head上只有.body，那么.content中的文字数量不足就可以正常使用。

两个div内联，动态尺寸

1 个答案: