div padding, margin?

Question

div padding, margin?

8

我是一名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 的下方，为什么会这样呢？ type div 是 20％宽度，title 是 80％宽度，因此应该恰好为100％。我是否忘记了任何边距或其他度量单位？我尝试使用边距将 title div 移到左边，但仍然有问题。我想知道获得像图片一样的效果的正确方法是什么？（不完全相同，因为如果您仔细看，title div 稍微比它应该的短。请注意，其右边框与 content div 不对齐。）

提前感谢。

编辑：2010/09/28

实际上，这就是我想要实现的内容： alt text

而这是我现在拥有的： alt text

更新了一下以上代码，如果我没有带边框的 div，它会起作用。由于边框宽度为 1px，因此我需要将 type div 宽度设置为 20％-2px（左边框 + 右边框 = 2px），将 title div 宽度设置为 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的边框。

- nacho4d

那并未解决我的问题，所以我最终使用了表格。由于HTML太慢，所以我使用CALayer来实现我的功能，而不仅仅是为此视图使用UIWebView。 - nacho4d

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karel Petranek · Accepted Answer

你缺少一个清除浮动的div。浮动元素不会像你期望的那样扩展.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>

_{(来源: fii.cz)}

因为浮动元素已经脱离文档流，不再影响其容器的高度，所以容器 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>

_{(来源：fii.cz)}

如果您将上面两个示例结合起来，您可以强制容器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>

_{(来源：fii.cz)}