忽略了更大的元素

浮動元素我有這樣的代碼：忽略了更大的元素

.smallColumn{ 
 
    float:left; 
 
    width: 300px; 
 
    display: inline; 
 
} 
 
.largeColumn{ 
 
    width: 1700px; 
 
}

<div class="container"> 
 
    <div class="smallColumn" id="1">Small</div> 
 
    <div class="smallColumn" id="2">Small</div> 
 
    <div class="smallColumn" id="3">Small</div> 
 

 
    <div class="largeColumn">Large</div> 
 

 
    <div class="smallColumn" id="4">Small</div> 
 
    <div class="smallColumn" id="5">Small</div> 
 
    <div class="smallColumn" id="6">Small</div> 
 
    <div class="smallColumn" id="7">Small</div> 
 
    <div class="smallColumn" id="8">Small</div> 
 
</div>

我要在適合屏幕的行爲許多小的列。有多少，取決於它所查看的屏幕大小。大列必須位於小列後面的行的下方，並覆蓋enire行。任何剩餘的小列應顯示在其下面的行上。我怎樣才能做到這一點？

謝謝！

編輯：我似乎沒有很好地解釋我的問題。舉個例子：

大列應該顯示在第三個小列下面的行中，所以它在代碼下面。當在正常屏幕上顯示時，第一行上有另外3個元素的空間（我編號爲了清楚）。我希望列4,5和6忽略大列，並顯示在第一行。由於第7列和第8列不適合第一行，因此它們應該在大列下方顯示爲一行。在一個稍大的屏幕上，第一行的第7列會有空間，所以它也應該顯示在那裏。

來源

2015-10-01 Coen000

快速的問題，你知道的列的高度（甚至在不同的媒體查詢？） – NachoDawg

如果你不明白它是如何工作的，那麼使用浮點數來佈局會導致break-layout問題。

首先，你不需要把display:inline因爲浮動元素是block要素自動。

要解決你的問題是確定浮動大：

.largeColumn{ 
    float:left; 
    width: 1700px; 
}

還是其他的解決辦法，就是去掉浮動元素，並把它轉換爲display: inline-block

來源

2015-10-01 09:59:18

你是比我快。我的jsfiddle：HTTP：//的jsfiddle。 net/5ococjma/ –

對不起，這是舊的遠西:) –

如果我正確理解你的問題，你也應該補充浮動：左邊到.largeColumn。祝你好運

來源

2015-10-01 10:00:40

只需添加clear:both到.largeColumn（你沒有指定width，但當然你也可以）：

.largeColumn{ 
    clear: both; 
}

從https://developer.mozilla.org/en-US/docs/Web/CSS/clear：

清晰的CSS屬性指定是否元素可以位於之前，或者必須在其下方移動（清除）。

來源

2015-10-01 10:03:19

你想要的是使用clear：對於大的元素。

.largeColumn{clear: both;}

我建議通過MDN運行 - 浮動/明確的，因爲浮動元素可能很麻煩：MDN - float。

這是一個fiddle使用您的代碼。

來源

2015-10-01 10:09:59 Lucie

如果第一行還有剩餘空間，我希望大列下方的小列在那裏移動。任何不適合該行的小列，我想顯示在大列下方 – Coen000

試試flexbox。

.container { 
 
    display: flex; 
 
    flex-flow: wrap; 
 
} 
 

 
.smallColumn { 
 
    flex-basis: 300px; 
 
} 
 

 
.largeColumn { 
 
    flex-basis: 100%; 
 
}

<div class="container"> 
 
    <div class="smallColumn">Small</div> 
 
    <div class="smallColumn">Small</div> 
 
    <div class="smallColumn">Small</div> 
 

 
    <div class="largeColumn">Large</div> 
 

 
    <div class="smallColumn">Small</div> 
 
    <div class="smallColumn">Small</div> 
 
    <div class="smallColumn">Small</div> 
 
    <div class="smallColumn">Small</div> 
 
    <div class="smallColumn">Small</div> 
 
</div>

來源

2015-10-01 10:18:02 Orland

使用Flex謝謝你的提示。我設法得到我的解決方案。不是最漂亮的解決方案，但工程

<div class="container"> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 

    <div class="largeColumn"><div class="contentDiv">test test</div></div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
    <div class="smallColumn">Small</div> 
</div> 
.container { 
display: flex; 
flex-flow: wrap; 
height: 60px; 
} 
.smallColumn { 
flex-basis: 300px; 
align-self: flex-start; 
background-color: yellow; 
} 

.largeColumn { 
flex-basis: 1px; 
align-self: flex-start; 
background-color: orange; 
margin-top: 30px; 
} 

.contentDiv 
{ 
background-color: orange; 
position: absolute; 
left:10px; 
flex-basis: 600px; 
}

來源

2015-10-01 11:55:08 Coen000

忽略了更大的元素

回答

相關問題