代码之家 › 专栏 › 技术社区 › nacho4d

分区填充,边距?

margin border css html

nacho4d · 技术社区 · 14 年前

我想展示这样的东西: alt text

这就是我所拥有的:

<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是20%宽度, 标题 宽度是80%,所以应该是100%。这里有没有我忘记的保证金或其他指标? 我试过搬家 标题 标题 div比应该的要短一点。请注意其右边框与 content 部门

编辑:2010/09/28

alt text

这就是我所拥有的: alt text

如果我没有带边框的div,上面的代码(更新了一点)就可以工作了。因为边框宽度是1px,所以我需要设置 div width为20%-2px(左边框+右边框=2px)和分割至80%-2倍

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

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

这与 clear:both 内容

简言之:我怎样才能使一个div包括它的边界是准确的20%宽度?

伊格纳西奥

<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%,在内部分区中设置了边框。

1 回复 | 直到 14 年前

Karel Petranek 14 年前

缺少一个清除div。浮动元素不会扩展 .cell_3x3_type 如你所料。请尝试以下操作:

<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

部门 是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 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