Question

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

左栏：240px;中栏：360px;右栏：360px。我使用的是960px包装。

我使用float创建了布局并放入了一些占位符文本。我通过将每个列宽减少11px为所有列添加了10px右边距和1px实线边框。我通过应用填充添加了5px的填充p和h元素，而不是div（我从Adobe 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;}

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

3 个答案: