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

しかし、現在、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」にも。

また、「postcontent」がポスター情報を尊重する距離に等しい「postcontent」に等しい「marginleft」が必要になります。

しかし、最善の解決策 (すべてを揃えたい場合) は、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 に答える