Question

我在这里创建了一个jsfiddle示例

但是当我尝试修复正确的列时，它并没有保持固定的宽度。我知道如果我把它放在左侧并修复它，使用相同的代码，它将保持固定状态。已经有一段时间了，因为我和css一起玩过，所以试图刷新并对此感到沮丧。任何帮助，将不胜感激。谢谢！

如果您需要代码，请点击此处

HTML：

<div id="wrapper">
    <div id="header">
           header
    </div>
    <div id="content">
        <div id="topBar">
            Top bar
        </div>
        <div id="leftColumn" class="column">
            Content
        </div>
        <div id="rightColumn" class="column">
            Content
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>

CSS：

body {
    background: none repeat scroll 0 0 #CCCCCC;
    font: 13px/17px Arial,Helvetica,Verdana,sans-serif;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
div#header {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    height: 70px;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}
div#wrapper {
    height: 100%;
}
div#content {
    background: none repeat scroll 0 0 #B4C4EA;
    height: 87%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    width: 90%;
}
div#footer {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    height: 50px;
    margin: 0 auto;
    padding: 20px 0 0;
    position: relative;
    width: 90%;
    text-align: center;
}
div#topBar {
    background: none repeat scroll 0 0 #444;
    color: #FFFFFF;
    height: 40px;
    text-align: center;
    width: 100%;
}
.column {
    display: inline-block;
    float: left;
    height: 200px;
}
div#leftColumn {
    border-right: 1px solid #000000;
    width: 83.88%;
}
div#rightColumn {
    border-left: 1px solid #000000;
    width: 1.25em;
}

Answer 1

您可以浮动右列并将overflow:hidden属性放在左侧。如果您在标记的左侧前面有正确的列，则左列将填充剩余的宽度。

<强> HTML

<div id="topBar">Top bar</div>
<div id="rightColumn" class="column">Content</div>
<div id="leftColumn" class="column">Content</div>

<强> CSS

.column {
    float: right;
}
div#rightColumn {
    width:50px;
}
div#leftColumn {
    float:none;
    overflow:hidden;
}

JSFiddle

或者，将列显示为表格单元格，这种方式需要您为列提供容器：

<强> HTML

<div class="columns">
    <div id="leftColumn" class="column">Content</div>
    <div id="rightColumn" class="column">Content</div>
</div>

<强> CSS

.columns {
    display:table;
    width:100%
}
.column {
    display:table-cell;
}
div#rightColumn {
    width:50px;
}

JSFiddle

为什么右列不会保持固定宽度以及如何修复？

1 个答案: