float：leftを使用せずにインラインブロックを使用して解決策が必要です。インラインブロックを使用してページを列に分割する
*{
\t margin:0;
\t \t padding:0;
\t }
\t body{
\t margin:0;
\t \t padding:0;
\t }<div style="width: 50%;background-color: #4caf50;display: inline-block;">
\t Section 1
</div>
\t <div style="width: 50%;background-color: #ff5722;display: inline-block;">
\t Section 2
</div>解決策はありますか？
次の例のようにコンテナとdisplay: flexを使用しようとすることができます：
.container {display: flex}
.one {background-color: red; width: 50%}
.two {background-color: blue; width: 50%}<div class="container">
<div class="one">div one</div>
<div class="two">div one</div>
</div>お返事ありがとうございます。 Flexは私にとって非常に新しいものです。すぐに私はそれを使用します。 –
あなたがスペースなどの要素（改行といくつかのタブの数の間にスペースを持っています、 ただ明確にします）。最小化されたHTMLは、この問題
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
}<div style="width: 50%;background-color: #4caf50;display: inline-block;">Section 1</div><div style="width:50%;background-color: #ff5722;display: inline-block;">Section 2</div>inline-blockを解決するアカウントに空白を取ります。あなたは `インラインblock`要素は空白を尊重するので、この仕事`インラインblock`の列を構築しようと
<div style="width: 50%;background-color: #4caf50;display: inline-block;">Section 1</div><div style="width: 50%;background-color: #ff5722;display: inline-block;">Section 2</div>
が巨大な痛みであることを確認するために、それを削除する必要があります。列の終了タグと開始タグの間に改行やスペースを含めないようにする必要があります。別の解決方法を見つけることを強くお勧めします。 –
*インラインブロック要素の間の*スペースと対戦する必要があります。 **ラウンド1 - ファイト！**問題の要素間でhtmlコメントを使用します（ガイド：https://css-tricks.com/fighting-the-space-between-inline-block-elements/）。まだ立っている場合は、次のラウンドを参照してください。 **第2ラウンド - Fight！** inline-block要素に 'font-size：0px'を宣言すると、インラインブロック要素の間のスペースは文字スペースになりますが、入れ子の（子）要素のfont-sizeをリセットすることを忘れないでください。それはあなたのノックアウトを与える必要があります。 – UncaughtTypeError
** Post fight summary：**あなたの兄弟要素は、それらの間の文字スペースのために水平に整列しています。 – UncaughtTypeError