display：inline-blockは新しい行を強制します

Question

display: inline-blockはまったく人気がなく、人々はfloatを使用する傾向があります。これは私の問題の有益な答えが見つからなかったのかもしれません。

次のスニペットでは、3つのボックスがあります。 #b1は、#b2と同じ高さと#b3を合わせています。新しい行の代わりに#b2のすぐ下に#b3を直接表示することはどういうことですか？

のため、clear:bothのために追加する必要があります。floatでどうすればよいかわかりません。私の知識でそれをテストし、より良い結果を得られなかった。

#b2と#b3の周りにラッパーを追加せずに誰でもこの問題を解決する方法がありますか？残念ながら、HTMLマークアップは変更できません。

ありがとうございました。素敵な日です。私の意見で

#wrapper { 
 
    width: 100%; 
 
    font-size: 0; 
 
} 
 
.block { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 
.block > p { 
 
    font-size: 1rem; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.block_50x100 { 
 
    width: 50%; 
 
    padding-top: 100%; 
 
    background: #0f0; 
 
} 
 
.block_50x50 { 
 
    width: 50%; 
 
    padding-top: 50%; 
 
    background: #00f; 
 
} 
 
.block_50x50+.block_50x50 { 
 
    background: #f00; 
 
}

<div id="wrapper"> 
 
    <div id="b1" class="block block_50x100"> 
 
    <p>some content</p> 
 
    </div> 
 
    <div id="b2" class="block block_50x50"> 
 
    <p>some content</p> 
 
    </div> 
 
    <div id="b3" class="block block_50x50"> 
 
    <p>some content</p> 
 
    </div> 
 
</div>

Answer 1

、フロートは、この場合に適しています。

#wrapper { 
 
    width: 100%; 
 
    overflow: hidden; /* more reliable way to contain floats 
 
         by creating the isolated Block Formatting Context (BFC) 
 
         more on this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */ 
 
} 
 
.block { 
 
    display: block; 
 
    overflow: hidden; /* new BFC again, now to preven overlapping of regular and floating blocks */ 
 
} 
 
.block_50x100 { 
 
    width: 50%; 
 
    padding-top: 100%; 
 
    background: #0f0; 
 
    float: left; 
 
} 
 
.block_50x50 { 
 
    width: 50%; 
 
    padding-top: 50%; 
 
    background: #00f; 
 
} 
 
.block_50x50+.block_50x50 { 
 
    background: #f00; 
 
}

<div id="wrapper"> 
 
    <div id="b1" class="block block_50x100"> 
 
    </div> 
 
    <div id="b2" class="block block_50x50"> 
 
    </div> 
 
    <div id="b3" class="block block_50x50"> 
 
    </div> 
 
</div>

十分な水平方向のスペースがあるが、そのような要素は一列に、フォーマットインラインのルールでレイアウトされているので、任意inline- *要素は、2つの以上の行にまたがることができません、その後、行の折り返しが行われ、新しい行が始まります。フロートだけが複数行のテキストにまたがることができます。別のオプションは、flex-flow: column wrapでFlexboxレイアウトを使用することですが、明示的な高さをコンテナに設定する必要があります。