CSS如何使用不同div的邊距

編輯：添加了Javascript和Masonry標籤。我一直在尋找砌體和所有我的模塊是相同的大小，所以我不知道砌體如何可以幫助我，因爲我不想獲得不同大小的元素排隊。我仍在瀏覽砌體教程，因爲目前有點混亂。如果這是修復，我爲添加附加標籤道歉。CSS如何使用不同div的邊距

我創建三個div離線，問題，然後去。我正在採取我稱之爲模塊的內容，並將它們放在這三個div中。當我放置3個以上的模塊時，他們會創建另一行。不幸的是，我的作品不能隨模塊一起移動，我必須手動進入並更改邊距以將所有內容排成一行。我不確定如何根據問題行的數量在哪裏改變。任何幫助將不勝感激。

<div class="grid_17"> 
     <div id="offlinetitle"> 
<p>System is Offline</p> 
      </div> 

     <div id="issuestitle"> 
    <p>System is partially offline or experiencing issues</p> 
     </div> 

     <div id="issuescontents"> 
      <a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none"> 
      <div class="grid_3"> 
        <p id="contexttitle">Access</p> 
       <p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p> 
       </div> 
      </a> 

<div id="AccessModal" class="reveal-modal"> 
     <h1>Access</h1> 
     <p>This is text to describe something> 
        <p4>Last Update: 08/30/2013 5:00pm</p4> 
     <a class="close-reveal-modal">&#215;</a> 
    </div> 
         </div>  

     <div id="gotitle"> 
      <p>All systems go</p> 
     </div>    

    </div>

我的CSS是如下網格17是父容器一切都是那麼最後一個容器是實際的模塊。

.grid_17{ 

} 

#offlinetitle{ 
color:#FFF; 
font-size:25px; 
background:#F00; 
height: 35px; 
text-decoration:none; 
list-style:none; 
} 

#issuestitle{ 
color:#FFF; 
font-size:25px; 
background:#FC0; 
height: 35px; 
text-decoration:none; 
list-style:none; 
margin-top:15px; 
} 

#gotitle{ 
color:#FFF; 
font-size:25px; 
background:#093; 
height: 35px; 
text-decoration:none; 
list-style:none; 
margin-top:535px; 
} 
.container_24 .grid_3 { 
    width: 213px; 
    background:#CCC; 
    height:55px; 
    margin-top:10px; 
}

如果需要更多信息，請讓我知道。感謝您的幫助！

來源

2013-08-30 ZeroAccess

您需要將每個「模塊」（標題和內容）包裝在它自己的div中，然後將此父div浮動到左側。事情是這樣的：

<div class="grid_17"> 
    <div> 
     <div id="offlinetitle">...</div> 
    </div> 

    <div> 
     <div id="issuestitle">...</div> 
     <div id="issuescontents">...</div> 
    </div> 

    <div> 
     <div id="gotitle">...</div> 
    </div> 
</div>

類似於CSS：

.grid_17 { width: 300px; } 
.grid_17 > div { float: left; width: 100px; height: 100px; }

備註clearfix：如果您在grid_17格後顯示任何內容，您還需要清除浮動。我不會在這裏深入，但你可能想要查看clearfix課程。

來源

2013-08-30 21:51:18 zigdawgydawg

我試圖做到這一點，不得不不斷改變高度。它做了類似的事情，當我爲每個div做了margin-top時，除了這會將高度同時應用於所有3。當需要更多/更少的模塊時，我需要它們進行更改。 – ZeroAccess

你試圖做的事不能用純CSS完成。要獲得組織成行的可變高度元素，您需要使用表（您手動啓動一個新行）或使用像[jQuery Masonry]（http://masonry.desandro.com/）這樣的框架。 – zigdawgydawg

我將JavaScript和砌體添加到標籤。我在看砌體教程，但他們中的很多人似乎獲得不同大小的元素排列在我的所有模塊的大小相同。我很抱歉，如果砌體是修補程序，我仍然在讀它，因爲它對我有點困惑。 – ZeroAccess

CSS如何使用不同div的邊距

回答

相關問題