我想要一些看起来像典型的论坛帖子的东西，其中一些用户信息位于帖子的左侧，然后是帖子本身。我使用了两个包裹在另一个 div 周围的 div，然后在 css 上使用了 float。我的问题是另一个 div 在 float 时也想留在左边而不是“紧挨着”另一个 div。我试过了 display:inline;在 div 上，并将其改为 span。我拥有的最接近的东西只是另一个 div 的顶部在正确的位置(当我不 float 这个 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生成的，只是想先把布局弄好。
长话短说:
基本上我想要 head div 和 body div 彼此相邻而不是 body div 脱落，因为它认为不合适。
最佳答案
您可以将 x% 宽度添加到 .head 并将 (100-x)% 宽度添加到 .body。此外，您可以像以前一样将 float:left 添加到 .body 中。 See fiddle.
您现在的方式是，.head 元素占用左上角的空间，将内容插入 .body(未 float )向右。
当你不指定 float div的宽度时，.body div的宽度是div内部内容的宽度和中的最小值>父级的宽度。在这种情况下，内容的“宽度”大于父元素的宽度，因此 .body div 被推到它自己的水平线上。如果你在 .head 和 .body 上都有 float:left，如果 中没有那么多文本，它可以正常工作>.内容.
关于php - 两个 div 内联，动态尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11920809/