display：inline-block forces new line

好像display: inline-block是相當不受歡迎的，人們傾向於使用float來代替，也許這就是爲什麼我找不到有效答案的原因。display：inline-block forces new line

鑑於以下片段，有3個框。 #b1的高度與#b2和#b3的高度一致。是否有可能直接在#b2下顯示#b3而不是新行？

我不太喜歡float因爲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>

來源

2016-09-15 raQai

當然，它會強制新行，因爲您將前兩個元素的寬度設置爲50％，並且第三個元素沒有可用空間。 –

不，自從你消除了漂浮物以後就沒有了。所有其他當前佈局方法（不包括支持零的CSS網格）（不包括定位）需要額外的包裝器（*除非容器的高度已知*） –

您仍然可以不使用'clear'來使用'float'。由於你的盒子最終具有相同的高度，下一個元素將放置在下面：[demo]（https://jsfiddle.net/ou70kvor/） – insertusernamehere

在我看來，花車更適合這種情況。

#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- *元件不能跨越兩個或更多個線路，因爲這樣的元件通過內聯的格式化規則佈置，在單線而有足夠的水平空間，之後發生換行並開始新行。只有花車可以跨越幾行文字。另一種選擇是使用帶有flex-flow: column wrap的Flexbox佈局，但這需要將顯式高度設置爲容器。

來源

2016-09-15 09:54:33

只需將'float：left'添加到'.block_50x100'工作在我的案件。如果我不更改'display'屬性，有什麼可能會出錯的嗎？ – raQai

另外使用'flex-flow'是沒有選擇的，因爲它應該保持響應，因此高度不會被知道。唯一的選擇是使用JS，但我更願意使用CSS來進行基本佈局。 TY爲您提供幫助和解釋 – raQai

@raQai，添加'float'已經隱式地將'display'改爲'block'（https://www.w3.org/TR/CSS22/visuren.html#dis-pos-flo ）並創建新的BFC。所以在這種情況下它是另一個工作解決方案。 –

display：inline-block forces new line

回答

相關問題