0

これはあまりにも基本的な質問ですが、私の Web サイトでの div の動作に困惑しています。

私は以前に同じ問題を経験したことがある.

質問:サイトの右下近くにある赤い div タグが左側の対応するタグを消去するのはなぜですか? それに適用される「明確な」ルールはありません！

html は次のとおりです。

<div id="home-left">
<?php 
echo "Some php=generated content";
?>
</div> <!-- END HOME-LEFT -->

<div id="home-right-container">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div> <!-- END HOME-RIGHT-CONTAINER -->

対応する CSS は次のとおりです。

#home-left {
width:280px;
margin:0 0 0 20px;
//clear:both; /* STAY CLEAR OF THE SCROLLER-FEATHER-CONTAINER! */
}

#home-left h3 {

    //font-size: 1.128571429rem;
font-size:12px;
    line-height: 1.2;
    font-weight: bold;
text-transform:uppercase;
margin-bottom:10px;
}

#home-left p {
    margin: 0 0 24px;
    margin: 0 0 1.514285714rem;
font-size:11px;
    line-height: 1.5;
}

#home-right-container {
width:100px;
background:red;
float:right;
}
4

4 に答える 4

1

左の div は、実際には右の div をクリアしています。これは、要素が ではない場合、floated基本的にページの幅全体に広がる余白を取るためです。

2 つのソリューション:

  1. 赤いボックスの左側に追加float: leftします。div
  2. 下の赤いボックスの左側に追加display: inline-blockします。div
于 2013-04-16T21:22:19.600 に答える