緊密裝配較小的內嵌塊div圍繞較大的浮動左邊

一切都很好，直到我試圖文本對齊：center;我的div。顯然，浮動的div忽略了文本對齊，但浮動的div需要這樣才能在同一行上放置兩個較小的div。緊密裝配較小的內嵌塊div圍繞較大的浮動左邊

這很難解釋，但這裏是代碼的例子來描述它更好地：

.featured-series { 
    width:606px; 
    height:406px; 
    display:inline-block; 
    float:left; 
    margin:3px 3px 3px 3px; 
    background-color:black; 
}

所有我想知道的是如何使特色系列DIV的行爲像標準系列divs，並在同一時間中心。謝謝！

來源

2015-10-22 Zei

我結束了JS的一點點捏造的。我知道這很淘氣，但是它做的很好，而且資源相當便宜。

function centerContent(){ 
    $('.center-content').width(Math.floor($('.body').width()/306)*306); 
} 

setInterval(centerContent, 250);

.center-content has margin：0 auto;它是所有系列div的容器。我發現，因爲我無法設置寬度，所以我真的做不了多少，所以我讓JS根據屏幕大小將寬度設置爲最佳。

不是最乾淨的解決方案，我更喜歡純JS，但如果它工作，它的工作原理。

編輯：.body類是一個在它內部加載ajax的div，當它改變大小時，它基本上就像普通頁面上改變大小一樣。

來源

2015-10-22 18:37:28 Zei

刪除float:left;並將margin:0 auto;添加到它。

.featured-series { 
    width:606px; 
    height:406px; 
    display:inline-block; 
    margin:0 auto; 
    background-color:black; 
}

來源

2015-10-22 17:03:19

如果我刪除浮動標準系列div不會堆疊在彼此的頂部。 – Zei

它適用於我：https：//jsfiddle.net/8fu5b9td/5/ –

我認爲你是誤解，標準系列div到特色系列div的直接權利也必須堆疊。我究竟是如何擁有原版的標準系列div的。只是爲了確定，你是在一個小屏幕上？對於小屏幕上正在發生的事情，可能並不是很明顯。（隨着你的代碼更改，精選系列處於正確的位置，但它也將標準系列div移出位置，我的問題基本上是，我怎麼都有）。 – Zei

試試這個https://jsfiddle.net/8fu5b9td/7/

CSS

@media(max-width: 930px) { 
    .featured-series { 
     margin: 0 auto; 
     float: none; 
    } 
} 

@media(max-width: 610px) { 
    .featured-series { 
     background-color: black; 
     display: block; 
     height: 200px; 
     margin: 0 auto; 
     vertical-align: top; 
     width: 300px; 
     float: none; 
    } 
}

來源

2015-10-22 17:25:23

這對移動設備來說很好，但不幸的是，它不能回答問題，因爲問題仍然存在於930像素以上的頁面。 – Zei

你想讓它與下面的div對齊？ –

它需要兩行標準系列div到特色系列div的右側，然後其餘的直接放在底下。正如另一張海報所顯示的那樣，使用固定的像素寬度可以做到這一點，但它需要能夠擴展，必須是動態的。 – Zei

緊密裝配較小的內嵌塊div圍繞較大的浮動左邊

回答

相關問題