0

我正在尝试将 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 的情况下做我想做的事？

4

3 回答 3

1

table这是使用和的 CSS 显示类型的一种方法table-cell。

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

的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，但您可以根据您的布局要求进行调整。

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

要使左右状态指示条的高度为 14 像素，您需要有一个单独的块元素，其中包含左右子元素。

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

如果您将.content's width 设置为 auto，它将采用相同的宽度并填满剩余的可用页面宽度。

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

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

于 2013-06-18T01:27:42.473 回答
1

你可以试试 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;
}

请查看演示。

于 2013-06-18T01:46:08.303 回答
0

你需要浮动

div1{
float:left;
}

div2{
float:left
}
于 2013-06-17T21:26:48.780 回答