內聯塊和浮點的佈局：左元素

我一直在尋找特定問題的答案。我有一些重複的元素（使用angularjs，但與它無關）。當第二個元素高時，第三個元素被壓到第二行，在第一列中的第一個元素和第三個元素之間留下空白區域。我想避免這種情況。內聯塊和浮點的佈局：左元素

的結構與此類似：

<div class="windows"> 
    <div>short content</div> 
    <div>tall content<br />more content</div> 
    <div>any size</div> 
</div>

和CSS3：

windows { display: block } 
windows > div { 
    display: inline-block; 
    float: left; 
}

我的問題是，我的觀點只允許兩個寬，所以第三個被太遠下推。

觀測的輸出：

################################# 
#*************** ***************# 
#*short content* *Tall content *# 
#*************** *More content *# 
#    ***************# 
#***************    # 
#*Any Size  *    # 
#***************    # 
#################################

需要的輸出：

################################# 
#*************** ***************# 
#*short content* *Tall content *# 
#*************** *More content *# 
#*************** ***************# 
#*Any Size  *    # 
#***************    # 
#################################

有沒有簡單的解決方案，不涉及2列DIV佈局？由於這些是動態加載的，每個選項卡類別中有3-5個，我只需要將它們加載到單個div中。由於角度，它們在一個陣列中。兩個div列意味着2個數組。我正在尋找一個簡單的CSS解決方案。我嘗試過'vertical-align：top';'沒有成功。

@farid：我無法使用固定高度......這是根據所有設備尺寸縮放的。自動換行可以使高度不可預知，我不想要圖形故障。聲明的問題比單詞丟棄他們所在的GUI元素要好得多。除非你的意思是讓它們全都更高......我不想浪費屏幕空間：在大屏幕上會有太多的填充。

來源

2017-07-02 Jon Crawford

在某些情況下，你可以給一個固定的高度重複的DIV ......它只是一個簡單的解決方案時，你知道有多少行最大的文本可以。 – Fered

這是許多問題重複的問題。在SO上搜索「石工」或谷歌爲同一主題，但這裏是：https://masonry.desandro.com/ – Rob

因爲我已經使用了幾個框架，我不想爲一個功能添加另一個，也不我是否想在新框架中重新構建數週的工作？我需要一個簡單的css解決方案。 –

* { 
 
    /* include paddding and borders in width */ 
 
    box-sizing: border-box; 
 
} 
 

 
.windows { 
 
    border: solid 5px red; 
 
} 
 

 
.windows > div { 
 
    border: solid 5px green; 
 
    float: left; 
 
    width: 50%; /* use media queries at some size might set it to 33.333% */ 
 
} 
 

 
.windows > div:nth-child(2) { 
 
    border: solid 5px orange; 
 
    float: right; /* this one needs to be float right */ 
 
} 
 

 
.windows:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; /* when using floats always clear them */ 
 
}

<div class="windows"> 
 
    <div>short content, <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> 
 
    <div>tall content<br />more content<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
 
    <div>any size<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
 
</div>

來源

2017-07-02 19:03:19 caramba

這是一種方式，第n個孩子正好浮動。 –

看起來我的其他解決方案有問題。通過適當的媒體查詢，這是最好的答案！謝謝@caramba –

給浮動留下財產.windows類

來源

2017-07-02 19:08:22 TJcobra

內聯塊和浮點的佈局：左元素

回答

相關問題