Question

我正在尝试将3个div放在一边，两个div需要平均填充页面的其余部分：

    <div class="second_bar">
        <div class="status_border_left">
        </div><div class="nav_bar">
        </div><div class="status_border_right">
        </div>
    </div>

我的CSS：

.status_border_left{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.status_border_right{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.nav_bar{
    position:relative;
    margin: 0 auto;
    height:80px;
    width:980px;
    background-color:green;
}
.second_bar *{
    display:inline-block;
    vertical-align:top;
}
.second_bar{
    height:80px;
    width:100%;
}

任何方式在不涉及JavaScript的情况下做我想做的事情？

Answer 1

以下是使用table和table-cell的CSS显示类型执行此操作的一种方法。

您需要对左右子元素进行一些小修改，只需定义一个包装.content div来包含任何内容。

HTML ：

<div class="second_bar">
    <div class="status_border left">
        <div class="content"></div>
    </div>

    <div class="nav_bar"></div>

    <div class="status_border right">
        <div class="content"></div>
    </div>
</div>

和 CSS ：

.second_bar {
    height:80px;
    width:100%;
    border: 1px dotted blue;
    display: table;
}
.status_border {
    display: table-cell;
    vertical-align: top;
    width: auto;
    background-color: yellow;
}
.status_border .content {
    width: auto;
    height: 14px;
    background-color: pink;
}
.nav_bar {
    display: table-cell;
    vertical-align: top;
    height: 80px;
    width: 980px;
    min-width: 980px;
    background-color: green;
}

对于您的容器区块.second_bar，请将显示类型设置为table，将宽度设置为100％。

子元素.status_border和.nav_bar包含display: table-cell和vertical-align: top，但您可以根据布局要求进行调整。

.nav_bar子div的宽度为980px，但由于它是一个表格单元格，如果窗口足够小，宽度可能缩小到小于980px。如果需要，表格单元格将缩小以适合内容。要保持整个宽度，请将min-width设置为宽度。

要使左右状态指示条高达14px，您需要在左右子元素中使用单独的块元素。

默认情况下，三个table-cell块将占据三个表格单元格中最高的高度，在本例中为80px .nav_bar div。

如果您将.content的宽度设置为自动，则它们将采用相同的宽度并填充剩余的可用页面宽度。

请注意，IE8不支持table-cell，但除此之外，这是一个非常有用的模式。

请参阅演示小提琴：http://jsfiddle.net/audetwebdesign/SyAAQ/

Answer 2

您可以尝试使用css3 flexbox模块。像这样：

HTML

<div class="second_bar">
  <div class="status_border_left">left</div>
  <div class="nav_bar">nav bar</div>
  <div class="status_border_right">right</div>
</div>

CSS

html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.second_bar {
  width: 100%;
  min-height: 100%;
  color: #fff;

  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.status_border_left,
.status_border_right {
  width: 20%;
  background: green;
}
.nav_bar {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}

请查看demo。

Answer 3

你需要漂浮

div1{
float:left;
}

div2{
float:left
}

在中心划分具有特定宽度，侧面必须与屏幕一起缩放

3 个答案:

HTML

CSS