我有以下HTML：
<body>
<div id="postwrapper">
<div class="posterinfo">
Username<br />
<img src="http://board.ogame.nl/wcf/images/avatars/avatar-3778.gif" alt="avatar" /><br />
Postcount
</div>
<div class="postcontent">
Hi there everyone!<br /><br />
This is a sample text to test my post-layout's divs
<br />
Some text...<br />
Some text...<br />
Some text...<br />
Some text...<br />
Some text...<br />
Some text...<br />
As you can see untill here it's all going fine but:.<br /><br />
Here the text starts completely at the left..<br />
But it shouldn't..<br />
It should start at the same place as above.. Right from the div where the avatar is...<br />
blabla<br />
</div>
<div class="postersignature">
This signature should stay at the completely bottom of the postwrapper and should also be start at the right of the avatar div
</div>
</div>
</body>
使用此CSS：
html,body {margin:0;padding:0;height:100%;}
#postwrapper {
width:100%;
height:auto;
}
.posterinfo {
float:left;
height: auto;
margin-right:10px;
background: #222222;
}
.postcontent {
margin-top:10px;
margin-bottom: 0px;
height: 100%;
background: #333333;
word-wrap: break-word;
}
.postersignature {
height:auto;
width: 100%;
margin-bottom: 0;
bottom:0;
background: #442222;
}
但是现在de postcontent中的文本开始于div的完全左侧（在浮动到左边的posterinfo div下方），但是如果文本太长而无法放在旁边，我想防止它进入图像下方。
我在这里说明了这一点：http://jsfiddle.net/BsftM/
我该怎么做？
最佳答案
添加以下样式：
.postcontent { float: left; }
.postersignature { clear: both; }
http://jsfiddle.net/BsftM/5/