Question

我有3 divs水平对齐。

Div 1是我的侧栏

display:block;
float:left;
width:180px;
height:100%;

Div 2是中间（子内容）

display:block;
float:left;
width:200px;
height 100%;

Div 3是正确的部分

Div 3上的

width:100%将其置于Divs 1和2之下。我怎样才能让它在页面的右侧拉伸？

Answer 1

如果您不想使用calc（）函数，请尝试以下操作：

<div class="wrapper">
    <div class="sidebar">sidebar</div>
    <div class="panel">panel</div>
    <div class="main">main</div>
</div>

.wrapper {
    border: 1px dotted blue;
    height: 400px;
}
.sidebar {
    width: 100px;
    height: 100%;
    background-color: tan;
    float: left;
}
.panel {
    width: 200px;
    height: 100%;
    background-color: pink;    
    float: left;
}
.main {
    width: auto;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/6qdYK/

overflow: auto上的.main会将div保留为一列而不会包围浮动元素，这可能就是您所需要的。

Answer 2

出现此问题是因为剩余宽度不是100％，而是100％是完整窗口的宽度。

所以你可以使用css3 calc（）函数

.div3{
width: calc(100% - 180px - 200px)
}

在使用calc（）函数can i use calc

之前看到这个

或者如果你想通过自己计算宽度来定义以像素为单位的宽度，将主容器宽度减去（180 + 200）px。

否则，您可以定义宽度自动，这可能更适合您。

拉伸div以填充空白

2 个答案: