0

これは私が先週遭遇した問題の再現です。3 つのボックスがあり、そのうちの 2 つを左にシフトして、親ボックスに収まるようにしたいと考えています。それらをうまくシフトできますが、CSS はそれらが幅に収まることを完全に無視し、最後のボックスを新しい行に配置して、外観を完全に台無しにします。これは、firefox 11とchrome 18で問題が発生したデモです。左シフトを行うときに明らかに可能であるため、3つのボックスが行に収まるようにcssに影響を与えるにはどうすればよいですか。

HTML（2番目の部分は、シフトが機能していない場合と比較して、シフトが機能していることを確認するためのものです。）

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>


<div class="A2">
    <div class="B2"></div>
    <div class="C2"></div>
    <div class="D2"></div>
</div>

CSS

.A { width: 290px; height:200px; background-color: red; }
.B, .C, .D { width: 100px; height: 100px; }
.B, .D { background-color: green;}
.C { width: 100px; background-color: blue; }
.A div { float: left; }
.C, .D { position:relative; left: -50px; }


.A2 { width: 290px; height:200px; background-color: red; }
.B2, .C2, .D2 { width: 100px; height: 100px; }
.B2, .D2 { background-color: green;}
.C2 { width: 100px; background-color: blue; }
.A2 div { float: left; }
4

2 に答える 2

6

3x100px > 290px ですよね？したがって、3 番目のボックスが改行に割り込むのも不思議ではありません。

position:relative 要素の元のスペースが占有されたままになることを覚えておく必要があります。そのため、2boxes を 50px 左にずらしても 3 つの box が収まりません。

編集：

使用してみてくださいposition:absolute- ドキュメントフローから要素を取り出します (ただし、これは float と「互換性」がありません)。それ以外は、子要素の幅を親の幅に合わせて調整するか、その逆にする必要があります。

絶対配置または負のマージンを使用すると、コンテンツの一部が切り取られることに注意してください。すべてがうまく収まるように、正しい寸法を使用することをお勧めします。

例

于 2012-05-14T20:16:03.040 に答える
3

すべてを 1 行に収めたい場合は、負のマージンを使用できます。

カウントする 10 ピクセルの余分なスペースがあるため、次のように、できるだけ均等に分割することをお勧めします (3 つの要素では少し厄介です)。

.B{ margin-left: -3px; }
.C{ margin-left: -3px; }
.D{ margin-left: -4px; }

http://jsfiddle.net/M6uBk/15/

それを行うには他にも多くの方法があります。または、これらの数を任意の方法で調整して合計 10 にすることもできます。コンテナ内にすべてが収まらない可能性があるため、表示する要素の数によって異なります。

于 2012-05-14T20:23:44.337 に答える