css - 试图并排获得三个部门

Question

这是我当前的代码，但我看不出问题出在哪里。我是 html 的新手，所以我不太确定。我想在左侧有一个列，占空间的 20%，中间的列占 60% 的空间，右侧的列占 20%。

#wrapper {
    background-color: #788D9A;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

#mainleft {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;
    display:inline-block;
}

#maincenter {
    width: 60%;
    float: left;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    display:inline-block;


}

#mainright {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;

}

Answer 1

使用padding-left padding-right margin-left margin-right 时需要注意border-left 和 border-right 当你想要那种类型的布局时。

这些样式中的每一个都会影响该元素的整体宽度，因此添加 padding: 10px 实际上会使您的 div width = 20% + 20px。

---

如果你想要内部填充和边框样式一个内部 div

示例:http://jsfiddle.net/b62Ju/2/

---

HTML

<div id="wrapper">    
    <div id="mainleft">
        <div>L</div>
    </div>
    <div id="maincenter">
        <div>C</div>
    </div>
    <div id="mainright">
        <div>R</div>
    </div>
</div>​

CSS

#wrapper {
    background-color: #788D9A;
}

#wrapper > div
{
    height: 1000px;
    float: left;
    text-align: center;
}

#mainleft {
    width: 20%;    
    background-color: #ABB8C0;
}

#maincenter {
    width: 60%;
}

#mainright {
    width: 20%;
    background-color: #ABB8C0;
}

#maincenter > div
{    
    height: 1000px;
    border-left: solid black;
    border-right: solid black;
}

#mainleft > div, 
#maincenter > div,
#mainright > div
{
    padding: 10px;
}

---

或者，您可以使用 box-model 样式:

.box
{
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
}

更多信息:http://www.quirksmode.org/css/box.html