CSS堆疊可變高度的div在兩列

所以我正在我的網站上的用戶的個人資料頁面。而且我對CSS有點問題。CSS堆疊可變高度的div在兩列

我的問題是以下幾點：我有四個固定寬度的div盒子，但高度可變，我希望他們堆疊一個在另一個之上。

圖片波紋管是我的問題的屏幕截圖，標題爲「最新視頻」的div應該粘貼到「基本信息」標題。像「聯繫信息」和「最新照片」是。

My problem

我的HTML看起來像這樣：

<div style="margin-left:-10px"> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for basic info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for contact info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest photos 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest videos 
    </div> 
</div>

的信息框中的CSS類看起來是這樣的：

.infoBox { 
    width: 100%; 
    margin: -1px; 
    background-color:#37312d; 
    padding:5px; 
    border:#5b504a solid 1px; 
    margin-bottom:9px; 
    float:left; 
}

我該怎麼做才能使這項工作？

來源

2012-09-10 Joris Blanc

你把他們全都留下來了，我會想象兩個漂浮的東西會浮到你想要的東西上，還是我錯過了什麼？ –

我覺得這裏有些東西沒有。我製作了一個[小提琴]（http://jsfiddle.net/7pm67/1/），其中我製作了一個寬度爲760px的容器，並且所有東西都排成一列。這裏有更多的CSS嗎？內容本身可能存在問題？ – Eric

這個問題可能會有所幫助http://stackoverflow.com/questions/10302056/workign-with-floating-li-elements-in-footer/10303004#10303004 – Paradise

短nesting your divs in columns：

<div class="left-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div> 
<div class="right-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div>

你可以嘗試jQuery Masonry。 Here's a fiddle展示其用途。

來源

2012-09-10 18:53:03 crowjonah

偉大的聯繫，我認爲這會更加流暢地給約里斯他想要的東西。 +1 – KRyan

即使我希望不包含JavaScript的解決方案，我也會研究這一點。謝謝 –

本頁有很多CSS解決方案！ [這是另一個小提琴]（http://jsfiddle.net/crowjonah/pWvsh/）使用嵌套的div作爲列。 – crowjonah

您可以使用此代碼

#bottom{ 
    width: ???px; 
    height: ???px; 
    background-color: black; 
} 
#top{ 
    width:???px; 
    height:???px; 
    background-color:red; 
    z-index: 999; 
} 


<div id="bottom"> 
    <div>......</div> 
    <div id="top">......</div> 
</div>

來源

2012-09-10 18:56:07

嘗試你可以把箱子列like so。這是一個非常基本的網格系統，但它顯示了基本的想法：您將您的盒子堆疊在形成列的包裝盒中。

如果您將在整個站點上重複使用此模式，則可能需要使用更正式的網格系統。通過簡單搜索「CSS網格系統」可以找到許多示例。

來源

2012-09-10 18:57:09 tuff

我建議你把內容分成兩列：

HTML：

<div style="margin-left:-10px"> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for basic info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest videos 
     </div> 
    </div> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for contact info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest photos 
     </div> 
    </div> 
</div>

，並在你的CSS加：

.column{float:left; width:50%;}

UPDATE：列別」裏面的箱子如果您使用此解決方案，則需要將其浮動。

來源

2012-09-10 18:59:47

我想對此做出的唯一更改是將'column'作爲一個類而不是一個ID，因爲您的意思是在多個元素之間共享該列。 – mclark1129

感謝@Mike，我只是修復了這個問題 –

這可能會起作用，我會去試試看，如果是實際的解決方案。 :) –

我找到的最佳解決方案ssue是用類.odd和.even或.left和.right標記每個帖子，然後簡單地向左移動奇數/左邊的帖子，並將偶數/右邊的帖子浮動。請注意，只有帖子的寬度合計爲其容器的寬度時，才能以可視方式工作。然後，在各種屏幕尺寸上進行此項工作，只需添加一個@media查詢即可將偶數/右側柱子上的浮點數更改爲小於雙列容器的寬度。

來源

2014-03-19 00:36:37 hyphnKnight

聽起來像你有一些代碼，你可以分享？ –

CSS堆疊可變高度的div在兩列

回答

相關問題