Question

我有一个动态生成的容器。最终会有一个div，或者里面有两个div。

第一个div可能存在也可能不存在，但第二个div总是在那里。我需要第二个div来总是填满整个宽度。

当第一个div存在时，它会填充宽度，但是当它不存在时，它不会一直移动。

以下是我正在使用的CSS：

.div1 {
  display: table-cell;
}
.div2 {
  display: table-cell;
  width: 100%;
  vertical-align: top;
}

注意：这两个div都有表单字段和标签。

Answer 1

添加具有display:table样式的父元素：

＆＃13;

.table{
    display:table;
    width: 100%;
    height: 200px;
}

.div1 {
  display: table-cell;
  background-color: red;
}

.div2 {
  display: table-cell;
  width: 100%;
  vertical-align: top;
  background-color: blue;
}

＆＃13;

<h2>div1 has content</h2>
<div class="table">
    <div class="div1">some content</div>
    <div class="div2"></div>
</div>

<br/>

<h2>div1 has no content</h2>
<div class="table">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

<br/>

<h2>no div1</h2>
<div class="table">
    <div class="div2"></div>
</div>

＆＃13;

JSFiddle

有Divs填充容器的宽度

1 个答案: