0

我想要一些看起来像典型论坛帖子的东西，其中一些用户信息位于帖子的左侧，然后是帖子本身。我用两个 div 包裹另一个 div，然后在 css 上使用 float。我的问题是另一个 div 在浮动时也想留在左边而不是在另一个 div 的“旁边”。我已经尝试display:inline;过 div 并将其更改为 span 。我最接近的只是另一个 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>

颜色只是为了能够区分每个部分。我认为这是因为bodydiv 认为它不适合 div 旁边head，所以它下降了。我可以指定一个明确的宽度和高度，让bodydiv 知道它可以适应，但这对拥有大分辨率显示器的人来说是不好的。在这一点上，我只是想使用<table>.

这些都是PHP生成的，只是想先把布局弄好。

tl;dr：基本上我希望headdiv 和bodydiv 彼此相邻，而不是让bodydiv 脱落，因为它认为它不适合。

4

1 回答 1

1

您可以将x%宽度添加到.head并将(100-x)%宽度添加到.body。此外，您可以float:left像.body以前一样添加。见小提琴。

The way you have it right now, the .head element is taking up space on the top left, pushing the content in .body (which is not floated) to the right.

When you don't specify the width of a floated div, the .body div's width is the minimum of the width of the content inside the div and the width of the parent. In this case, the content's "width" is greater than the parent element's width, so the .body div gets pushed to its own horizontal line. If you just have float:left on both .head and .body, it works correctly if there isn't that much text in .content.

于 2012-08-12T08:51:50.513 回答