css - サイズ変更時にcss浮動要素の位置が崩壊する

Question

ブラウザーのサイズを変更するたびに、.container の 2 番目の div が最初の div の下に配置されます。

<div class = "container">
     <div class = "one"></div>
     <div class = "two"></div>
</div>

divは本当に空白です。

CSS

.container{
    overflow: hidden;
    width: 810px;
    min-width: 810px;
}
.one,.two{
    width: 300px;
    height: 450px;
}
.one{float:left}

score 3 · Accepted Answer

他の要素を浮かせていないことに気付きました。これにより下にシフトします。float: left;orrightを使用する必要があるdivため、水平方向のスペース全体を占めるため、押し下げられます。

.one, .two{
    width: 300px;
    height: 450px;
    float:left; /* Float both elements */
    background: #f00;
}

別

とを使用display: inline-block;しwhite-space: nowrap;て、要素のラップを防ぐ必要があります

これにより、同じ効果が得られます。唯一のものは4px空白です。単に使用できます

.two {
   margin-left: -4px;
}

上記は空白の問題を修正します

score 0 · Accepted Answer

この CSS を追加します。デモ。

.two {
    margin-left: 300px;
}

PS: float で動作する場合は、clearfixを使用する必要があります。

3 に答える 3