我是一名 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%。我在这里忘记了任何 margin 或其他指标吗?
我尝试使用边距将 title
div 移动到左侧,但仍然有问题。我想知道获得类似图片的正确方法是什么?
(不完全是因为如果你仔细观察 title
div 比它应该的要短一点。看到它的右边框没有与 content
div 对齐。)
提前致谢。
编辑:2010/09/28
这实际上是我想要实现的:
这就是我所拥有的:
如果我没有带边框的 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%?
伊格纳西奥
回答:
我意识到分别围绕 type 和 title 的包装 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 中设置了边框。
最佳答案
您缺少一个清算 div。 float 元素不会像您预期的那样展开 .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 属性作用的简要解释:考虑一个仅包含 float 元素的容器 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,因为 float 元素已从文档流中取出,不再影响其容器的高度。元素上的 clear: both
属性“清除”所有 float ,即确保该元素位于其之前的所有 float 元素下方:
<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 的高度等于其中最高 float 元素的高度:
<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)
关于html - div填充,边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3802614/