当文本超过一行时，内联 - 柔性div被推下

Question

I'm working on an HTML/CSS chart that displays a series of financial groupings and visually shows how that money is distributed between companies. I've noticed that when the company names are long enough to take up multiple lines, its containing div drops down a bit.

I have the following fiddle: https://jsfiddle.net/s1pxkj7q/1/

Why are those div s getting pushed down and how do I correct it?

Thanks!

 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; } #layers { width: 1000px; height: 400px; margin: 0 auto; } #layer-headings { width: 1000px; margin: 0 auto; } #layer-headings h3 { width: 50%; text-align: center; float: left; font-size: 14px; font-weight: bold; margin-bottom: 50px; } #consumed { width: 50%; height: 100%; outline: 1px solid #999; display: inline-block; margin: 0; vertical-align: top; } #available { width: 50%; height: 100%; display: inline-block; margin: 0; } #layers h3 { text-align: center; font-size: 14px; font-weight: bold; margin: 0; padding: 10px 0; } #layers .graph { height: 100%; width: 100%; border-bottom: 1px solid #999; } #layers h4 { font-size: 12px; text-align: center; } #layers .graph-box { margin-left: 5%; width: 75%; height: 100%; float: left; outline: 1px solid #555; } #layers .graph-box h4 { font-weight: bold; display: block; margin: 0 auto; } #layers .graph-label { margin-right: 5%; padding-left: 10px; width: 15%; height: 100%; vertical-align: top; display: flex; align-items: center; } #layers .graph-label h3 { margin: 0; padding: 0; } #layers .graph-col { height: 100%; display: inline-flex; align-items: center; outline: 1px solid #555; } #layers .graph-label.pdf { display: inline-block; } #layers .graph-col.pdf { display: inline-block; } .blue-grad { background: #3085dd; /* Old browsers */ background: -moz-linear-gradient(left, #3085dd 0%, #60abf8 50%, #3085dd 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#3085dd), color-stop(0.5, #60abf8), to(#3085dd)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #3085dd 0%, #60abf8 50%, #3085dd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #3085dd 0%, #60abf8 50%, #3085dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3085dd', endColorstr='#3085dd', GradientType=1); /* IE6-9 */ } .red-grad { background: #e54b29; /* Old browsers */ background: -moz-linear-gradient(left, #e54b29 0%, #fc8364 50%, #e54b29 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#e54b29), color-stop(0.5, #fc8364), to(#e54b29)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #e54b29 0%, #fc8364 50%, #e54b29 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e54b29 0%, #fc8364 50%, #e54b29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e54b29', endColorstr='#e54b29', GradientType=1); /* IE6-9 */ } .yellow-grad { background: #e2dd31; /* Old browsers */ background: -moz-linear-gradient(left, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#e2dd31), color-stop(0.5, #fffa7a), to(#e2dd31)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e2dd31 0%, #fffa7a 50%, #e2dd31 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e2dd31', endColorstr='#e2dd31', GradientType=1); /* IE6-9 */ } .green-grad { background: #3bdb30; /* Old browsers */ background: -moz-linear-gradient(left, #3bdb30 0%, #8cf984 50%, #3bdb30 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#3bdb30), color-stop(0.5, #8cf984), to(#3bdb30)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #3bdb30 0%, #8cf984 50%, #3bdb30 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #3bdb30 0%, #8cf984 50%, #3bdb30 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3bdb30', endColorstr='#3bdb30', GradientType=1); /* IE6-9 */ } .purple-grad { background: #894bed; /* Old browsers */ background: -moz-linear-gradient(left, #894bed 0%, #be99ff 50%, #894bed 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#894bed), color-stop(0.5, #be99ff), to(#894bed)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #894bed 0%, #be99ff 50%, #894bed 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #894bed 0%, #be99ff 50%, #894bed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#894bed', endColorstr='#894bed', GradientType=1); /* IE6-9 */ } .orange-grad { background: #d89531; /* Old browsers */ background: -moz-linear-gradient(left, #d89531 0%, #fcce99 50%, #d89531 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#d89531), color-stop(0.5, #fcce99), to(#d89531)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #d89531 0%, #fcce99 50%, #d89531 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #d89531 0%, #fcce99 50%, #d89531 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d89531', endColorstr='#d89531', GradientType=1); /* IE6-9 */ } .cyan-grad { background: #49e5e0; /* Old browsers */ background: -moz-linear-gradient(left, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#49e5e0), color-stop(0.5, #b8f9f5), to(#49e5e0)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #49e5e0 0%, #b8f9f5 50%, #49e5e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#49e5e0', endColorstr='#49e5e0', GradientType=1); /* IE6-9 */ } .deepblue-grad { background: #3b52d3; /* Old browsers */ background: -moz-linear-gradient(left, #3b52d3 0%, #7692f7 50%, #3b52d3 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#3b52d3), color-stop(0.5, #7692f7), to(#3b52d3)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #3b52d3 0%, #7692f7 50%, #3b52d3 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #3b52d3 0%, #7692f7 50%, #3b52d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3b52d3', endColorstr='#3b52d3', GradientType=1); /* IE6-9 */ } .pink-grad { background: #db3dce; /* Old browsers */ background: -moz-linear-gradient(left, #db3dce 0%, #fc94f5 50%, #db3dce 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, right top, from(#db3dce), color-stop(0.5, #fc94f5), to(#db3dce)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(left, #db3dce 0%, #fc94f5 50%, #db3dce 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #db3dce 0%, #fc94f5 50%, #db3dce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db3dce', endColorstr='#db3dce', GradientType=1); /* IE6-9 */ } #layers #consumed .graph { padding-right: 5%; position: relative; } #layers #consumed .graph-col { vertical-align: bottom; } #layers #consumed .graph-label { float: left; margin-left: 5%; } #layers #consumed .graph-row { position: absolute; bottom: 0; width: 100%; padding-right: 5%; } #layers #consumed .graph-box { margin-left: 0; } 

 <div id="layers"> <div id="available"> <div class="graph"> <div class="graph-row" style="height:20%;"> <div class="graph-box red-grad" style="outline:1px solid #555;"> <div class="graph-col" style="width:40%;"> <h4>40%<br>Short</h4> </div> <div class="graph-col" style="width:20%;"> <h4>20%<br>This is a long one</h4> </div> <div class="graph-col" style="width:30%;"> <h4>30%<br>Short</h4> </div> <div class="graph-col" style="width:10%;"> <h4>10%<br>Short</h4> </div> </div> <div class="graph-label"> <h3>$750,000</h3> </div> </div> <div class="graph-row" style="height:27%;"> <div class="graph-box cyan-grad"> <div class="graph-col" style="width:20%;"> <h4>20%<br>Short</h4> </div> <div class="graph-col" style="width:40%;"> <h4>40%<br>Short</h4> </div> <div class="graph-col" style="width:15%;"> <h4>15%<br>Short</h4> </div> <div class="graph-col" style="width:10%;"> <h4>10%<br>Short</h4> </div> <div class="graph-col" style="width:15%;"> <h4>15%<br>Short</h4> </div> </div> <div class="graph-label"> <h3>$1,000,000</h3> </div> </div> <div class="graph-row" style="height:27%;"> <div class="graph-box yellow-grad"> <div class="graph-col" style="width:25%;"> <h4>25%<br>Short</h4> </div> <div class="graph-col" style="width:22%;"> <h4>22%<br>This is a long one</h4> </div> <div class="graph-col" style="width:18%;"> <h4>18%<br>Short</h4> </div> <div class="graph-col" style="width: 17%;"> <h4>17%<br>Short</h4> </div> <div class="graph-col" style="width:18%;"> <h4>18%<br>Short</h4> </div> </div> <div class="graph-label"> <h3>$1,000,000</h3> </div> </div> <div class="graph-row" style="height:14%;"> <div class="graph-box purple-grad"> <div class="graph-col" style="width:100%;"> <h4>100%<br>Short</h4> </div> </div> <div class="graph-label"> <h3>$500,000</h3> </div> </div> <div class="graph-row" style="height:12%;"> <div class="graph-box orange-grad"> <div class="graph-col" style="width:100%;"> <h4>100%<br>Short</h4> </div> </div> <div class="graph-label"> <h3>$400,000</h3> </div> </div> </div> </div> </div> 

Answer 1

The problem is baseline alignment due to the vertical-align property.

The vertical-align property applies to inline-level and table-cell elements ( source ).

Since you're dealing with inline-level containers ( display: inline-flex ), vertical-align is being applied and its default value is baseline .

Simply override that with vertical-align: top on your containers.

#layers .graph-col {
    height: 100%;
    display: inline-flex;
    align-items: center;
    outline: 1px solid #555;
    vertical-align: top; /* NEW */
}