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