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

Answer 2

display: table属性似乎是这里的最佳选择。你获得了相同的高度列（我假设这是疯狂的底部边距/填充所用的），没有额外的标记和填充而不必担心调整框模型（在这里了解更多关于框模型：{{3 }}）。

http://css-tricks.com/the-css-box-model/

#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设置宽度。

试图并排三个部门

3 个答案: