Question

我正在尝试设置一个简单的页面网格。每行包含一个可选的左列和一个主内容右列。我希望右列在相同位置保持相同的大小，即使左列不存在。

我认为浮动左栏并在右栏上使用position: relative和left:会给我我想要的行为。

我的HTML看起来像这样：

<div class="row">
    <div class="sidebar">I'm a sidebar!</div>
    <div class="main">
        <p>I'm main!</p>
    </div>
</div>

我的CSS看起来像这样：

.sidebar {
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    position: relative;
    left: 220px;
    width: 500px;
    border: 1px solid green;
}

这是一个小提琴：http://jsfiddle.net/ttr5k/1/

令我惊讶的是，.main的内容向右移动（好像.main有padding-left）似乎是由于侧边栏。为什么会这样，我怎么解决呢？

我也怀疑这不是构建网格的最佳方法，有更好的方法吗？

Answer 1

添加绝对位置而不是相对

http://jsfiddle.net/ttr5k/2/

如您所见，文字再次左对齐

.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}

Answer 2

我建议做这样的事情：

.row {
    background:#eee;
    width:90%;
    overflow:auto;
    border:1px solid #ccc;
    margin:20px auto;
}
.sidebar {
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    float:left
    width: 500px;
    border: 1px solid green;
    overflow:auto;
    clear:right;
}

现在，您可以随时删除侧边栏而无需添加新的CSS

DEMO：http://jsfiddle.net/ttr5k/5/

OR ------ 如果你想要那个空间，即使没有侧边栏但仍想要内容溢出：

http://jsfiddle.net/ttr5k/7/

.row {
    background:#eee;
    width:600px;
    overflow:auto;
    border:1px solid #ccc;
    margin:20px auto;
}
.sidebar {
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    float:right;

    width: 396px; /* This is due to box-model adding border as width */
    border: 1px solid green;
    overflow:auto;
    clear:right;
}

Answer 3

以下是我如何做的FIDDLE：http://jsfiddle.net/mikea80/zJa5P/

<div class="row">
    <div class="main">
        <p>I'm main!</p>
    </div>
    <div class="sidebar"><p>I'm a sidebar!</p></div>
</div>

.row {
    margin: 0 auto;
    width:704px;
    clear:both;
}
.main {
    display:inline-block;
    float:right;
    width: 500px;
    border: 1px solid green;
}
.sidebar {
    display:inline-block;
    float: right;
    width: 200px;
    border: 1px solid red;
}

当行为700px时，此代码将使其居中

Answer 4

你必须在侧边栏类中添加绝对位置。

CSS：

.sidebar {
    position: absolute;
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    position: relative;
    left: 220px;
    width: 500px;
    border: 1px solid green;
}

相信我，这样，您可以毫无问题地添加其他行类。这是FIDDLE：

http://jsfiddle.net/asubanovsky/bVr6r/

位置：相对和浮动元素

4 个答案: