尝试让三个分区并排进行

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

示例：

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

Answer 2

display: table属性似乎是这里的最佳选择。你可以得到等高的列(我假设这就是疯狂的底部边距/填充的用途)，没有额外的标记和填充，而不必担心调整框模型(在这里了解更多关于框模型的信息：http://css-tricks.com/the-css-box-model/)。

http://jsfiddle.net/b62Ju/3/

#wrapper {
    display: table;
    width: 100%;
}

#wrapper > div
{
    display: table-cell;
    padding: 1em;
}

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

#maincenter {
    width: 60%;    
}

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

Answer 3

如果我们需要并排放置三次潜水供你参考，

HTML：

<div class="main">
    <div class="left">...</div>
    <div class="center">...</div>
    <div class="right">...</div>
</div>

CSS：

.main {
    width: 1000px;
    float: left;
    display: inline-block;
}

.left {
    width : 20%;
    float: left;
    display: inline-block;
}

.right {
    width : 20%;
    float: left;
    display: inline-block;
}

.center {
    width : 60%;
    float: left;
    display: inline-block;
}

看起来不错。

我认为在你的代码中你需要设置主要包装器div的宽度。