在CSS/HTML中使用div創建「表格」

我有一個400px寬的div內容，我希望在整個屏幕寬度上以30px的間距進行重複，類似於these博客模塊的佈局。在CSS/HTML中使用div創建「表格」

每行模塊的數量取決於屏幕的寬度，如上例所示。

我是使用div創建這種佈局的新手。我最大的問題在於讓divs在30px之間彼此挨在一起，然後開始新的一行。任何幫助將不勝感激。謝謝！

2011-10-01 user974254

http://stackoverflow.com/questions/3053205/how-create-table-only- using-div-tag-and-css –

CSS：

div.block { 
    margin-right: 30px; 
    float: left; 
    width: 400px; 
}

HTML：

<div class="block">...</div> 
<div class="block">...</div> 
<div class="block">...</div> 
<div class="block">...</div>

來源

2011-10-01 08:37:27

謝謝！正是我需要的。我如何去在行之間添加30px？ – user974254

向CSS添加'margin-bottom：30px' – Javaguru

明白了，謝謝。還有一件事讓我的項目變得完美......有沒有辦法將所有這些div集中在屏幕上，也許通過將它們包含在另一個div中？ – user974254

可以實現這一目標通過給float或display:inline-block

CSS：

.block { 
    margin-right: 30px; 
    float: left; 
    width: 400px; 
    height:500px 
} 

.block:nth-child(3n+3){margin-right:0}

HTML：

<div class="block">...</div> 
<div class="block">...</div> 
<div class="block">...</div> 
<div class="block">...</div> 
<div class="block">...</div> 
<div class="block">...</div>

來源

2011-10-01 08:40:51 sandeep

試試這個CSS：

.myclass { 
    margin-right: 30px; 
    float: left; 
    width: 400px; 
}

和HTML：

<div> 
     <div class="myclass">this is test block</div> 
     <div class="myclass">this is test block</div> 
     <div class="myclass">this is test block</div> 
     <div class="myclass">this is test block</div> 
    </div>

來源

2011-10-01 08:47:31

在CSS/HTML中使用div創建「表格」

回答

相關問題