html – 如何在一个容器中底部对齐多个内联块div而不会丢失它们
发布时间:2020-12-14 16:35:34 所属栏目:资源 来源:网络整理
导读:这是一个我正在研究的非常简单的条形图, div id="container" div style="display:inline-block;" /div div style="display:inline-block;" /div div style="display:inline-block;" /div/div 如果我将容器设置为relative,则将内部div设置为absolute底部:0,
这是一个我正在研究的非常简单的条形图,
<div id="container"> <div style="display:inline-block;"> </div> <div style="display:inline-block;"> </div> <div style="display:inline-block;"> </div> </div> 如果我将容器设置为relative,则将内部div设置为absolute&底部:0,然后它们都重叠.它们在没有绝对定位的情况下很好地流动,但条形图是颠倒的. 注意:我的意图是保留条形的内联流,而不必明确指定水平位置. 这是问题的一个更好的例子. http://jsfiddle.net/benstenson/NvvV6/1/ 1) correct orientation but vertical alignment is top <div id="no-content" class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> 2) wrong orientation,vertical alignment top <div id="has-content" class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> 3) mixed orientation,alignment is crazy <div id="mixed" class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c"></div> </div> 4) correct orientation and correct alignment but<br/> flow has been lost and horizontal position must be explicit <div id="absolute" class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c"></div> </div> 5) here we go! <table class="container"> <tr> <td><div class="a">a</div></td> <td><div class="b">b</div></td> <td><div class="c"></div></td> </tr> </table>?????????????????????????????????? CSS body {padding:1em;font-family:sans-serif;font-size:small;} .container { height:2.5em;width:50%;margin-bottom:1em; background-color:lightgray; font-size:larger; font-weight:bold; text-transform:Uppercase; } div.container > div { width:32%; display:inline-block; background-color:black; color:cyan; } #absolute { position:relative;} #absolute > div {position:absolute;bottom:0px;opacity:.3;} .a {height:50%;} .b {height:60%} .c {height:80%;} td{width:33.333%;vertical-align:bottom;} td > div{?background-color:black;?color:cyan;}? 那么有没有更好的方法来实现这一点,比如使用webkit flexbox或者什么? 解决方法
绝对定位时适合我:
<style type='text/css'> #container{ position :relative; border :1px solid #000; height :60px; width :100px; } .b{ position:absolute; width :20px; bottom :0 } .b1{background:blue ;height:10px; left:0px} .b2{background:red ;height:30px; left:30px;} .b3{background:yellow;height:50px; left:60px} </style> <div id="container"> <div class='b b1'></div> <div class='b b2'></div> <div class='b b3'></div> </div>???????????? Fiddle here. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |