Question

我正在尝试使用以下内容渲染3列设计：

中间固定宽度为660px
剩下的一半左右，但最小宽度：120px
中间div应该以屏幕为中心

我发现的一切都是关于固定左右柱并让流体在中间，但我希望完全相反。我使用

部分实现了我的目标

display: inline-block;
vertical-align: top;

这是fiddle。

缺少的是正确调整左右div的大小。当窗口调整大小时，660 / sizeofwindow正在改变，因此左边和右边div的百分比值不再正确。

Answer 1

使用calc来实现这一目标。

这是一种原生的CSS方法，可以在CSS中进行简单的数学运算，作为任何长度值的替代。

请注意，calc不适用于所有浏览器。

写：

#left, #right {
    min-width:120px;
    width:calc(50% - 330px); // half of 660px
}

当您使用display:inline-block时，请确保不要在div之间留下任何空格，因为inline-block会在元素之间留下空白。

请在此处查看更新的fiddle。

Answer 2

http://jsfiddle.net/hdt75/

.fenetre {
    text-align: center;
    width:1200px;
    background-color: grey;
    margin:  0 auto;
}

Answer 3

如果您想要类似于表格的行为，则应在CSS中使用display: table-cell：

.fenetre {
    display: table-row;
}
.section {
    display: table-cell;
}
#right {
    width: 50%;
}
#middle {
    min-width: 660px;
    max-width: 660px; // just 'width: 660px' won't be enough here
}    
#left {
    width: 50%;
}

http://jsfiddle.net/mblase75/zL9cn/

3列css，中间固定大小，左右流体

3 个答案: