div填充,边距?

Posted

技术标签:

【中文标题】div填充,边距?【英文标题】:div padding, margin? 【发布时间】:2011-04-17 16:28:59 【问题描述】:

我是一名 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

这实际上是我想要实现的:

这就是我所拥有的:

如果我没有带边框的 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 中设置了边框。

【问题讨论】:

这并没有解决我的问题,所以我最后使用了表格。而且由于 html 太慢了,我用 CALayers 实现了我的东西,而不是只为这个视图使用 UIWebView。 【参考方案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>

(来源: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)

【讨论】:

我用谷歌搜索了 clear 属性,但找不到很好的解释。您能解释一下 clear 属性到底是做什么的吗?为什么我在这里需要它?谢谢;) 更新了我的帖子,希望可以理解:) 我试过了,但我没有工作;(我也更新了我的问题,请看一下。;) 看了一下,使用 div 并不能真正可靠地解决这个问题。只需使用表格,它们非常适合您的情况 - 维护会更容易,布局会更简单,并且页面看起来像表格,语义不应该受到太多影响。 即使我无法 100% 解决您的建议并指出了表格的用法,这就是我最终所做的。谢谢

以上是关于div填充,边距?的主要内容,如果未能解决你的问题,请参考以下文章

如何用 div 填充边距空间并赋予其样式?

在边距、填充、边框全部为零之后还有空间吗?

CSS 使用百分比和边距、填充或边框

让两个 CSS 元素并排填充它们的容器,并带有边距

如何给popper.js popper-box边距/填充,使其不会粘在窗口边框上

UL 不会以 Div 为中心。填充不会解决它。保证金