0

我有以下 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/

我怎样才能做到这一点？

4

3 回答 3

2

添加以下样式：

.postcontent { float: left; }
.postersignature { clear: both; }

http://jsfiddle.net/BsftM/5/

于 2013-04-18T13:10:42.183 回答
0

如果您知道图像的大小，则可以使用pading-left : (size of the image)px

否则，您可以将图像放入 div 中，并使该 div 更长，这样文本就不会出现在下方

于 2013-04-18T13:08:11.877 回答
0

放：

 float: left

也适用于 div 的“postcontent”和“postersignature”。

如果你想右边的“postersignature”需要一个marginleft，等于“postcontent”与posterinfo的距离。

但是最好的解决方案（如果你想要一切都对齐）是将 postcontent 和 postersignature 放在一个新的 div“postnew”中，并将这个新的 div 也放在“float:left”中。

<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="postnew">
        <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>
   </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;
   bottom:0;
   background: #442222;
   word-wrap: break-word;
   margin-top:10px;
 }
 .postnew {
   float: left;
 }
于 2013-04-18T13:27:26.280 回答