1

私はcssの初心者ではないことを願っていましたが、なぜ次のことが起こるのか理解できません...

ここで例を見ることができます

同じ「行」に2つの区切られたdivを表示したい:

  • 最初の div は 2 番目の div まで 100% の幅でなければなりません
  • 最初の div の右端にある 2 番目の div

だから、私は次のことをしました

// CSS
.div2 {
    background:#EDEDED;
    float:right;    
}
.div1  {    
    background:#CCC;
}
.div1, .div2 {
    padding:4px;
    margin:4px;
}
.round {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>

しかし、.div2 は最初の div 内にあります... 悪い表示

次のようなものを表示するには？（表示されるべきだと思ったように...） 良い表示

助けていただければ幸いです...

編集：ソリューション by user570783

.div1 {overflow:hidden;}

魔法のように機能しますが、実際には文書化されていません。なぜこれが機能するのですか?

4

2 に答える 2

2

OK、フロート、インラインブロック、マージン、ボーダーなど、ここには多くのソリューションがありますが、すべて少なくとも 1 つの要素のサイズに関する知識が必要です。

でも！

ここでできるトリックがあります。最初の div に「overflow:hidden」を追加すると、div が強制的に「ブロック フォーマット コンテキスト」になります。

これにより、動的サイズの右フローティング要素を使用して、目的の結果が得られます。

これを IE5 および 6 で機能させるには、最初の要素で「hasLayout」をトリガーする必要があるため、position: relative;

フィドル

于 2012-05-07T00:45:42.467 に答える
2

float は言うことを行います。浮く。その下に物があるように。テキストは折り返されますが、境界線は折り返されません

「テスト 2」の幅がわかっている場合は、「margin-right: x;」を追加できます。

于 2012-05-06T23:39:31.633 に答える