なぜ2つの浮動小数点演算子が互いに下に立っているのですか？

Question

2番目の部門が最初の理由は何ですか？どちらも「フロート」要素です。 2番目のdivの幅を設定すると、すべてうまく動作します。しかし、私はこれらの2つの部門が1列に位置することを期待しています。

.one { 
 
    background-color: green; 
 
    float: left; 
 
    border: 1px solid green; 
 
} 
 
.two { 
 
    float: left; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 1

あなたは浮動要素の幅のを定義していないためです。 max-width、つまり50%と定義した場合、それらは同じ行に存在しなくなります。私はwidthとは対照的にmax-widthを与えることをお勧めします。なぜなら、あなたはその要素に静的なものを与えたくないと信じているからです。width。さらに、彼らは50%の後に起こるお互いに混乱しない限り、彼らは彼らが望むスペースを取るように柔軟でなければなりません。

.one { 
 
    background-color: green; 
 
    float: left; 
 
    border: 1px solid green; 
 
    max-width: 50%; 
 
} 
 
.two { 
 
    float: left; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
    max-width: 50%; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 2

あなたは浮く代わりにフレックス使用することができます。 コンテナにdisplay: flex;を追加します。最初のdivはflex: 0 0 auto;、2番目のdivはflex: 1 1 auto;です。 flex: 0 0 auto;は、要素が必要なだけ多くの領域を占めることを意味します。 flex: 1 1 auto;は、要素が利用可能なすべての領域を占めることを意味します。

.container { 
 
    display: flex; 
 
} 
 

 
.one { 
 
    flex: 0 0 auto; 
 
    background: red; 
 
} 
 

 
.two { 
 
    flex: 1 1 auto; 
 
}

<div class="container"> 
 
    <div class="one">Menu</div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div> 
 
</div>

Answer 3

あなただけのcalc CSS機能、このようなものを使用して、それらにいくつかの幅％のオプション、またはピクセルを与えることができ

...

.one { 
 
    background-color: green; 
 
    float: left; 
 
    border: 1px solid green; 
 
    display: block; 
 
    width: 10%; 
 
} 
 
.two { 
 
    width: 70%; 
 
    float: left; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
    display: block; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 4

Flexboxはあなたが本当に望んでいるものです、浮動は大ですが、常に反対のハックのように感じました真の解決策になった。

すべてのブラウザでflexboxを使用できますが、IE8ではこれを処理できませんが、これはもうサポートされていないブラウザです。 w3schoolsで読んでみることをお勧めします。彼らは一般的にかなり良いチュートリアルを持っています。それはフロートで起こっていたのだ理由として

.flex-container { 
 
    display: flex; 
 
} 
 
.one, 
 
.two { 
 
    padding: 5px; 
 
} 
 
.one { 
 
    background-color: green; 
 
    border: 1px solid green; 
 
} 
 
.two { 
 
    background-color: red; 
 
    border: 1px solid red; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
}

<div class="flex-container"> 
 
    <div class="one">Menu</div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div> 
 
</div>

、あなたは何も表示ブロックはdiv要素の一つが100を取って、100％であり、割り当てられた空間全体を、取り上げるそう言っていない限り％同じ行にもう一方の空きスペースはありません。

あなたはそれに幅を設定したり、ディスプレイをインラインに変更したり、フロートを.twoから削除したりすることができました（少し奇妙に見えますが）。

.one { 
 
    float: left; 
 
    background-color: green; 
 
    border: 1px solid green; 
 
} 
 
.two { 
 
    display: inline; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>