Question

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

我该如何做到这一点？

Answer 1

添加以下样式：

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

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

Answer 2

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

否则，您可以将图像放入div中，并使该div更长，以便文本不会低于

Answer 3

把：

 float: left

也对divs＆＃34; postcontent＆＃34;和＆＃34; postersignature＆＃34;。

如果你想要＆＃34; postersignature＆＃34;在右边需要一个等于距离的边距＆＃34; postcontent＆＃34;尊重posterinfo。

但是最好的解决方案（如果你想要使evertything一致）是将postcontent和postersignature放在一个新的div＆＃34; postnew＆＃34;并将这个新的一个放在＆＃34; float：left＆＃34;太

<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;
 }

对齐浮动div的div权限

3 个答案: