添加填充和边框而不会弄乱布局答案

【问题标题】：Adding Padding and Border without messing up layout添加填充和边框而不会弄乱布局
【发布时间】：2013-06-20 14:23:20
【问题描述】：

我有一个具有以下尺寸的 3 列布局：

左栏：240 像素；中栏：360 像素；右栏：360 像素。我使用的是 960 像素的包装器。

我使用浮动创建了布局并放入了一些占位符文本。我通过将每列宽度减少 11 像素为所有列添加了 10 像素的右边距和 1 像素的实心边框。我通过应用填充添加了 5 像素的填充p 和 h 元素，而不是 div（我从 Adobe DreamWeaver 的内置 3 列布局中挑选了一个技巧，尽管我不确定这是否是一个好习惯）。

对于固定宽度的布局，所有这些都可以正常工作，但是液体/流体布局呢？如何在不弄乱布局的情况下添加边距、边框和填充（我使用 float:left 来定位列）？

【问题讨论】：

JSFIDDLE 会很好
为什么不用display: table？

标签： css layout border margin padding

【解决方案1】：

如果您想要您的设计@960width，那么您可以更改为右宽度：240px；试试下面的css：

#wrapper{
    width:960px;
}
.left{
    width:240px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}
.middle{
    width:360px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}
.right{
    width:240px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;

}

试试下面的html：

<div id="wrapper">
    <div class="left">left</div>
    <div class="middle">middle</div>
     <div class="right">right</div>
</div>

【讨论】：

这会起作用...，但我不想更改列的相对宽度。我从列宽中去掉 10px 的唯一原因是，它在视觉上产生的差异可以忽略不计（几乎无法察觉）。如果我从列中删除任何进一步的宽度，它会在视觉上产生显着差异。这就是为什么我将填充添加到 h 和 p 元素，而不是 div。
顺便说一下，总宽度加起来是 240 + 240 + 360 + 10 + 10 + 10 + 5 + 5 + 5 + 1 + 1 + 1= 888px。

【解决方案2】：

如果您希望您的设计采用液体/流体形式，请遵循以下代码。

HTML

<div id="wrapper">
    <div class="wrapper-in">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</div>

CSS

#wrapper{width:100%;}
.wrapper-in{width:1000px;}
.left{ width:218px; padding:5px; float:left; border:1px solid black; margin:0px 10px 0px 0px;}
.middle{width:338px; padding:5px; float:left; border:1px solid black; margin:0px 10px 0px 0px;}
.right{width:338px;padding:5px; float:left; border:1px solid black; margin:0px 10px 0px 0px;}

【讨论】：

我试过了......它不起作用。您添加了另一个具有流体宽度的包装器。但是容器的宽度是固定的。我认为这就是问题所在。
是的，你是对的。固定宽度是主要问题。您可以更改宽度大小然后检查。

【解决方案3】：

这可能是添加填充和边框（而不是边距）而不会弄乱 CSS 宽度的好方法。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

【讨论】：

我会检查一下并告诉你。谢谢指点！
box-sizing 属性，不包括边距。我该怎么办？