Question

我正在创建一个简单的css图表响应，适用于任何浏览器。这是我的代码：

<div style="width:500px;height:300px;">
    <div style="width:10%;height:20%;background:#00ffff;float:left;"></div>
    <div style="width:10%;height:40%;background:#00ffff;float:left;"></div>
    <div style="width:10%;height:80%;background:#00ffff;float:left;"></div>
</div>

但正如您所看到的，图表是倒置的：

http://jsfiddle.net/xkd6twsq/

我尝试过：

position:relative;
bottom:0px;

但不起作用：

http://jsfiddle.net/xkd6twsq/1/

Answer 1

使用display: inline-block代替float。家长需要display: table-cell和vertical-align才能将图表与底部对齐。

<style>
    div {
        display: table-cell; 
        vertical-align: bottom;
    }
    div div {
        display: inline-block;
        width: 10%;
        background: #0ff;
    }
</style>

<div style="width:500px;height:300px;">
    <div style="height:20%;"></div>
    <div style="height:40%;"></div>
    <div style="height:80%;"></div>
</div>

http://jsfiddle.net/xkd6twsq/4/

Answer 2

问题在于float:left，使用display: inline-block会得到您想要的内容：

<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:40%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:80%;background:#00ffff;display:inline-block;"></div>
</div>

来自CSS-tricks的

All about floats解释了何时使用浮点数和this display types answer详细说明为什么浮点数不是最佳选择。

如何将div修复到较大div的底部？

2 个答案: