div填充，保證金？

Question

我是一個iPhone開發堅持一些基本的CSS屬性;） 我想說明是這樣的：

這是我有：

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29--> 
     <div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29--> 
    </div> 
    <div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29--> 
</div> 

和CSS：

div.cell_3x3_top{ 
    height:20%; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
    margin-bottom: 1px; /*to compensate space between top and content*/ 
    text-align: center; 
    vertical-align: middle; 


} 
div.cell_3x3_type{ 
    width:20%; 
    float:left; 
    background-color: inherit; 
    margin-right: -2px; /*UPDATED:2010/09/29*/ 
} 
div.cell_3x3_title{ 
    width:80%; 
    float:left; 
    background-color: inherit; 
    margin: 0 0 0 0; /* maybe not neccesary*/ 
    padding: 0 0 0 0; /*maybe not neccesary*/ 
    margin-left: -1px; /*UPDATED:2010/09/29 */ 

} 
div.cell_3x3_content{ 
    height:80%; 
    background-color: inherit; 
} 

但是，當我使用上面的代碼title div呈現我的內容似乎太大，它出現在type div，Why 這是？ type div是20％的寬度，title是80％的寬度，所以它應該完全是100％。我在這裏遺忘了任何保證金或其他指標嗎？ 我試圖將title股利用保證金，但仍是越野車。我想知道得到類似圖片的正確方法是什麼？ （不完全是因爲如果你仔細title DIV有點短於它應該是。看到它的右邊框沒有與content格對齊。）提前

感謝。

編輯：2010/09/28

其實，這是我想達到什麼：

，這是我所：

上面的代碼（更新一點點）將工作，如果我不會接近divs。由於邊框寬度爲1px的我需要的是設置type DIV寬度20％-2px（左邊框+右邊界= 2px的）和title格到80％-2px

.rounded_left{ 
    border-top-left-radius: 4px 4px; 
    border-bottom-left-radius: 4px 4px; 

    border-color:gray; 
    border-width: 1px; 
    border-style:solid; 
} 

（.rounded_right是相似的）

這與clear:both屬性無關，我相信。我嘗試過，並沒有任何效果，因爲我的content div是一開始就很好。

簡而言之：我怎樣才能讓一個div包括其邊框讓我們說正好20％的寬度？

伊格納西奧

答：

我意識到，周圍型和標題的包裝DIV分別解決了這個問題。所以我的答案是這樣的：

<td class="cell"> 
<div class="cell_3x3_top bordered"> 
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div> 
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div>                </div> 
<div class="cell_3x3_content rounded_left rounded_right">content</div> 
</td> 

我設置了20％和80％的容器和內部div的邊界。

Answer 1

您缺少一個清算分區。浮動元素不會像預期的那樣擴大.cell_3x3_type div。試試這個：

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type">type</div> 
     <div class="cell_3x3_title">title</div> 
     <div class="cell_3x3_clear"></div> 
    </div> 
    <div class="cell_3x3_content">content</div> 
</div> 

CSS：

div.cell_3x3_clear { 
    clear: both; 
} 

的其餘部分保持不變。

編輯：
什麼clear屬性不小的解釋：考慮容器div只包含浮動元素，就像這樣（使用內聯CSS的清晰度）：

<div id="container" style="border: 1px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
</div> 

http://fii.cz/vksyr

容器div的高度爲0，因爲浮動元素從文檔流中取出，不再影響其容器的高度。該clear: both性質的元素的「清除」所有的花車，即可以確保元件放置在低於它之前的所有浮動元素：

<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
<div style="clear: both; height: 10px; width: 50px; border: 1px solid black;">Cleared</div> 

http://fii.cz/tjdqwac

如果你把上面的兩個例子，你可以迫使div容器有其高度等於最高浮動元素的高度吧：

<div id="container" style="border: 2px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
    <div style="clear: both; height: 0px; border: 1px solid black;"></div> 
</div> 

http://fii.cz/nmpshuh