Question

我是一名iPhone开发人员，坚持使用一些基本的CSS属性;）我想展示这样的东西： 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下面，为什么会这样？ 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;
}

（.round_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

你错过了一个结算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>

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

div填充，保证金？

1 个答案: