这是一个我正在研究的非常简单的条形图,
<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;}
解决方法
绝对定位时适合我:
<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>
原文地址:https://www.jb51.cc/html/227349.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。