0

私はこのようなルールを持っています:

body{border:1px solid gray;}

#middle{
float:left;
margin-left:3%;
margin-top:20px;
width:41%;
border-top:solid #aaaaaa 1px;
}

.message-content{
padding:0 10px 0 10px;
float:left;
}

私のHTMLは次のようなものです:

<html>
<body>
<div id="middle">
  <div class="message-content">Loris ipsidum</div>
  <div class="message-content">Loris ipsidum</div>
<div id="clear"></div>
</div>
</body>
</html>

JSFiddle で複製しようとしましたが、できませんでした。基本的に、何が起こっているかというと、多くのメッセージ コンテンツ div を取得した後、bodyルールで定義された境界線が渡されます。基本的に、コンテンツの真ん中に線があるように見えます。何か案は？

実用的な例を上げようとします。

4

1 に答える 1

0

要素はフローティングであるため#middle、親 (この場合は本体) の高さにはカウントされないため、本体はウィンドウの高さのみを占めています。

要素のclearスタイルを定義していないようです。#clearそれでも、要素は浮動要素の内側ではなく、後clearにある必要があります。

于 2012-04-07T10:54:48.703 に答える