LeoZ 发表于 2010-4-21 14:35:51

DIV排列问题

想让2个不同高度的div在同一列显示，并以下边为对称

结果发现个问题(以下IE，非IE的请将display:inline改为display:inline-block)


<div id="div1" style="width:30px;height:200px;background-color:red;display:inline">
<div id="div2" style="width:30px;height:100px;background-color:green;display:inline">


这2个div没有</div>关闭，则达到了2个不同高度的div在同一行显示的情况，但无法下边对齐？

浏览器如何解析这个没有</div>的呢？是以为div2是div1的内容么？

但如果加了</div>

<div id="div1" style="width:30px;height:200px;background-color:red;display:inline"></div>
<div id="div2" style="width:30px;height:100px;background-color:green;display:inline"></div>

则能下对齐，但无法合并在一列中

请问css如何操作能达到我想要的效果？谢谢

JS小小 发表于 2010-4-21 16:40:06


<style type="text/css">
#div1{
        left:0px;
        position:absolute;
}
#div2{
        left:0px;
        position:absolute;
}
</style>
<div id="div1" style="width:30px;height:200px;background-color:red;display:inline"></div>
<div id="div2" style="width:30px;height:100px;background-color:green;display:inline"></div>

LeoZ 发表于 2010-4-22 08:42:23

谢谢js小小，但绿色div并没有下对齐啊

其实我就想做ColumnChart的柱体部份

JS小小 发表于 2010-4-22 11:16:43


<style type="text/css">
#div1{
        left:0px;
        position:absolute;
}
#div2{
                top:120px;
        left:0px;
        position:absolute;
}
</style>
<div id="div1" style="width:30px;height:200px;background-color:red;display:inline"></div>
<div id="div2" style="width:30px;height:100px;background-color:green;display:inline"></div>
页: [1]
查看完整版本: DIV排列问题