css - 添加填充和边框而不会弄乱布局

Question

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

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

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

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

Answer 1

这可能是添加填充和边框（而不是边距）而不会弄乱 CSS 宽度的一个很好的技巧。

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

Answer 2

如果您想要您的设计@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>

Answer 3

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

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