0

我正在尝试使浮动 div 具有填充父 div 的高度。

http://jsfiddle.net/sergep/2qPZ2/1/

结构如下：

Parent div______________________
|    Middle child
|    Left child - float:left
|    Right child - float:right

问题是左孩子的文本比右孩子少，这意味着右孩子增加了父 div 的高度（以适应 div），但左浮动 div 并没有效仿。

CSS看起来像这样：

.bottomcontainer {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: auto;
}

.bottomleft {
  background: #346CA5;
  float:left;
  width: 50%;
}


.middle {
  background: #FFCE3C;
}

.bottomright {
  background: #65B237;
  float:right;
  width: 50%;
}

我怎样才能让蓝色.bottomleft类坚持到底部.bottomcontainer？- 我正在尝试做出响应，所以我不想使用实际的像素大小！

因此，如何使里面的文本垂直居中对齐？

4

2 回答 2

2

display:table-cell;在子 div 上使用，请参阅此处以获取可以推断的示例

于 2013-11-13T11:23:55.580 回答
1

我误解了这个问题。您可以通过在周围添加一个额外的 div.bottomleft并将.bottomright其显示为表格/表格单元格来解决此问题：

HTML：

<div id="nav"></div>
<div id="container">
    <div class="bottomcontainer">
        <div class="middle">
            <h2>Intro tag line here</h2>
        </div>
        <div class="bottom">
            <div class="bottomleft">
                <h2>Tag line here</h2>
            </div>
            <div class="bottomright">
                <h2>Longer tag line goes here</h2>
            </div>
        </div>
    </div>
</div>
<div name="content" id="content"></div>

CSS：

.bottom {
    display: table;
}
.bottomleft {
    display: table-cell;
    background: #346CA5;
    opacity: 1.0;
    width: 50%;
    vertical-align: middle;
}
.bottomright {
    display: table-cell;
    background: #65B237;
    opacity: 1.0;
    width: 50%;
}

并更新了 Fiddle 2

删除浮动，并添加一个绝对定位：

.bottomleft {
    background: #346CA5;
    opacity: 1.0;
    position: absolute;
    bottom: 0;
    width: 50%;
    vertical-align: middle;
}

还要检查更新的 Fiddle。

于 2013-11-13T11:27:11.770 回答