960寬三列布局，填充

我遇到了一個問題，我在960寬的畫布上設計三列布局的方式。960寬三列布局，填充

這就是我試圖的示意圖：

enter image description here

我有一個DIV元素是960寬。它有一個20px的外部填充，我需要3個相同的列在裏面。

有人可以幫助我的三列，所以每個盒子和兩者之間的邊距是平等的嗎？ 2和4列是簡單的，但除以3不等於包含元素中的20px填充。當使用2列和4列時，我使用FLOAT：LEFT和一個帶CLEAR的額外元素。所有.960_element類名

<style> 
.960_element { width:960px; padding:20px; } 
.960_element .left { } 
.960_element .middle { } 
.960_element .right { } 
</style> 

<div class="960_element"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"></div> 
</div>

來源

2012-11-04 ShadowStorm

您是否嘗試過簡單地將內部元素的寬度設置爲33％？我認爲這會奏效。 –

1日是錯的，你不能定義一個類的名字開始與多家

Demo

HTML

<div class="element">  
    <div class="left">h</div>  
    <div class="middle">h</div>  
    <div class="right">h</div> 
</div>

CSS

.element { width:960px; padding:20px;background-color: #dddddd;margin: 40px;/*margin not required*/} 
.element div {background-color: #ff0000;} 
.left { height: 200px; width: 32%; display: inline-block;} 
.middle { height: 200px; width: 32%; margin-left: 14px; display: inline-block; } 
.right { height: 200px; width: 32%; margin-left: 14px; display: inline-block; }

來源

2012-11-04 06:49:21

感謝您的幫助。元素名稱只是一個構成名稱來描述元素。我知道這個裁決。 – ShadowStorm

@ShadowStorm歡迎:) –

在每個項目周圍放置10個像素邊距更爲常見，這樣項目之間的空間合計爲20個像素，邊上的空間僅爲10個像素。

對於你的情況，你的盒子需要是從960-80/3（寬度，減去邊距，除以盒子）計算出來的293（和第三個）像素寬。

如果您的寬度爲980，或者您的左右邊距爲10像素，則最終可能會出現較好的偶數（300）。

來源

2012-11-04 06:51:58

960寬三列布局，填充

回答

相關問題