Question

我需要定位三个div。中心的中间div有固定的宽度。其他两个应该平均分配剩余的空间。

我的HTML：

<div class="menu-header" role="banner">
    <div>header left</div>
    <div class="container">header middle</div>
    <div>header right</div>
</div>

我的css：

.menu-header{
    display: table;
    width: 100%;
}
.menu-header{
    display: table-cell;
}

使用此代码，左右div具有不同的宽度，即正在使中心div向左或向右倾斜。

Answer 1

两个样式块都使用相同的类

尝试 - .dll\ .txt\ .exe\ .log\ .tmp\

检查小提琴 - https://jsfiddle.net/afelixj/zq7g6pLo/

Answer 2

替代方式，jsfiddle链接http://jsfiddle.net/r94wf7km/4/

HTML中的

，

<div class="menu-header" role="banner">
    <div class="left-div">header left</div>
    <div class="container">header middle</div>
    <div class="right-div">header right</div>
</div>

在CSS中，

.menu-header{
    width: 100%;
    position: relative;
}
.left-div{
    float:left;
}
.right-div{
    float:right;
}
.container{
    position: absolute;
    left: 50%;
    width: 200px;  /*fixed width*/
    margin-left: -100px; /*half of width*/
}
.left-div,
.right-div{
    width: calc((100% - 200px)/2);   /*give half of available space to both div*/
}

Answer 3

保证金自动可以使其成为中心第一种方式：

.container{
    margin:auto
}

第二种方式：

.menu-header{
    display: table;
    width: 100%;
}
.menu-header{
    display: table-cell;
}

但是显示表会使你的randring有点慢

三个固定宽度的div的布局

3 个答案: