0

这是我当前的代码，但我看不出问题出在哪里。我是 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;

}
4

3 回答 3

2

在使用padding-left padding-right margin-left margin-right border-left以及border-right何时需要这种类型的布局时，您需要注意。

这些样式中的每一个都会影响该元素的整体宽度，因此添加 apadding: 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

于 2012-12-13T18:18:14.773 回答
1

这些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;
}
于 2012-12-13T18:41:55.277 回答
0

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

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

于 2012-12-13T18:20:19.667 回答