Html div 填充，边距？

div padding, margin?

提问by nacho4d

I am a iPhone developer stuck with some basic CSS properties ;) I want to show something like this:

我是一名 iPhone 开发人员，坚持使用一些基本的 CSS 属性；) 我想展示如下内容：

This is what I have:

这就是我所拥有的：

<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>

and the css:

和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;
}

But when I render my content with above code titlediv seems to be too large and it appears underneath typediv, Why is this? typediv is 20% width, titleis 80% width so it should be 100% exactly. Is any margin or other metric I am forgetting here? I have tried to move titlediv to the left using margin but is still buggy. I wonder what is the correct way of getting something like the picture? (Not exactly because if you look closer titlediv is a little bit shorter than it should be. See that its right border is not aligned with contentdiv.)

但是当我用上面的代码渲染我的内容时，titlediv 似乎太大了，它出现在typediv 下，这是为什么？ typediv 是 20% 的宽度，title是 80% 的宽度，所以它应该是 100%。我在这里忘记了任何保证金或其他指标吗？我尝试title使用边距将div 向左移动，但仍然有问题。我想知道获得类似图片的正确方法是什么？（不完全是因为如果你仔细看，titlediv 比它应该的要短一点。看到它的右边框没有与contentdiv对齐。）

Thanks in advance.

提前致谢。

EDIT: 2010/09/28

编辑：2010/09/28

This is actually what I want to achieve:

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

and this is what I have:

这就是我所拥有的：

Above code (updated a little bit) would work if I wouldn't have bordered divs. Since border width is 1px what I need is to set typediv width to 20%-2px (left border + right border = 2px) and titlediv to 80%-2px

如果我没有带边框的 div，上面的代码（稍微更新）会起作用。由于边框宽度为 1px，我需要将typediv 宽度设置为 20%-2px（左边框 + 右边框 = 2px）并将titlediv 设置为 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 is similar)

（.rounded_right 类似）

This is not related to clear:bothproperty I believe. I tried and didn't had any effect since my contentdiv was good form the beginning.

clear:both我相信这与财产无关。我尝试过但没有任何效果，因为我的contentdiv 一开始就很好。

In short: How can I make a div including its border to be let's say exactly 20% width?

简而言之：如何制作一个包含边框的 div，让我们说正好是 20% 的宽度？

Ignacio

伊格纳西奥

ANSWER:

回答：

I realized that a wrapper div around type and title respectively solves the problem. So my answer is kind of like this:

我意识到围绕 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>

I set 20% and 80% in the containers and the borders in the inner div.

我在容器中设置了 20% 和 80%，在内部 div 中设置了边框。

回答by Karel Petranek

You are missing a clearing div. The floating elements do not expand the .cell_3x3_typediv as you would expect. Try this instead:

您缺少一个清除 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:

CSS：

div.cell_3x3_clear  {
  clear: both;
}

The rest remains the same.

EDIT:
A small explanation of what the clear property does: consider a container divthat contains only floated elements, like this (using inline CSS for clarity):

其余保持不变。

编辑：
对 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

http://fii.cz/vksyr

The height of the container divis 0 because the floating elements are taken out of the document flow and do not affect the height of their container anymore. The clear: bothproperty on an element "clears" all floats, i.e. makes sure that the element is placed below all floating elements that precede it:

容器的高度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

http://fii.cz/tjdqwac

If you combine the two above examples, you can force the container div to have its height equal to the height of the highest floating element in it:

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

http://fii.cz/nmpshuh