Html 如何在一个容器中底部对齐多个内联块div而不丢失其流？_Html_Css_Position_Css Position_Vertical Alignment

Html 如何在一个容器中底部对齐多个内联块div而不丢失其流？

html css

Html 如何在一个容器中底部对齐多个内联块div而不丢失其流？,html,css,position,css-position,vertical-alignment,Html,Css,Position,Css Position,Vertical Alignment,这是我正在研究的一个非常简单的条形图 <div id="container"> <div style="display:inline-block;"> </div> <div style="display:inline-block;"> </div> <div style="display:inline-block;"> </div> </div> 那么，有没有更好的方法来做

这是我正在研究的一个非常简单的条形图

<div id="container">
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
</div>

那么，有没有更好的方法来做到这一点，比如使用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>


#容器{
位置：相对位置；
边框：1px实心#000；
高度：60px；
宽度：100px；
}
.b{
位置：绝对位置；
宽度：20px；
底部：0
}
.b1{背景：蓝色；高度：10px；左侧：0px}
.b2{背景：红色；高度：30px；左侧：30px；}
.b3{背景：黄色；高度：50px；左侧：60px}

这是我的浏览器（Chrome 19）

html

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

这里是另一种方法。它需要一个额外的包装每个酒吧。我们的想法是制作几个列

.bar container

，它们跨越正确的条形宽度和

#图形的整个高度
<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <style type="text/css">
            .bar-container{
                float:left;
                height:100%;
                margin-right:10px;
                position:relative;
                width:30%;
            }
            .bar {
                border:1px solid black;
                bottom:0;
                position:absolute;
                width:98%;
            }

            .bar-1 {
                height:50px;
            }

            .bar-2 {
                height:100px;
            }

            .bar-3 {
                height:75px;
            }

            #graph {
                height:500px;
                margin:20px auto;
                position:relative;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id="graph">
            <div class="bar-container">
                <div class="bar bar-1">
                </div>
            </div>
            <div class="bar-container">
                <div class="bar bar-2">
                </div>
            </div>
            <div class="bar-container">
                <div class="bar bar-3">
                </div>
            </div>
        </div>      
    </body>
</html>


测试
.酒吧货柜{
浮动：左；
身高：100%；
右边距：10px；
位置：相对位置；
宽度：30%；
}
.酒吧{
边框：1px纯黑；
底部：0；
位置：绝对位置；
宽度：98%；
}
.bar-1{
高度：50px；
}
.bar-2{
高度：100px；
}
.bar-3{
高度：75px；
}
#图表{
高度：500px；
保证金：20px自动；
位置：相对位置；
宽度：500px；
}
试着给他们相对定位。@Jrod相对与绝对的术语在css中让我感到困惑。我试了两种方法只是为了确定。它仍然是颠倒的。你能举个例子说明你在战斗什么和你想要什么吗？我对你现在拥有的和你想要得到的有点困惑。子div元素是图中的条形图吗？请你详细说明一下好吗？对我来说，这似乎是一致的……我本可以这样做，但为了避免使用left:\u px，我一直在努力保持流程。我想知道您是否需要使用tables或flexbox进行此操作。我尽可能远离像素。这实际上似乎就是stackoverflow如何在用户配置文件视图中绘制代表条形图。@Benjamin：我同意你的理念，但你可以花几个星期的时间在“最佳实践”中尝试这样做某种程度上——特别是当图形开始变得更复杂或开始添加更多功能时。别忘了DOM元素并不是真正用于“图表”或“图形”……这意味着，在使用它们进行语义页面布局以外的创造性工作时，您可以稍微改变线条的颜色。@Benjamin:另外，这可能就是我，我发现：px的绝对定位通常是以一种无需头痛的方式实现跨浏览器兼容结果的最快方法（除了使用.js charting libs）。由于绝对定位所基于的x/y坐标系的直观性，维护使用绝对位置设计的图表应用程序也更容易。我相信你会发现有一百万人尖叫“那是错的！这不是语义！”。对他们来说，我会说这是可行的，它会得到结果，而且我能够更快地进入下一个项目任务。我感谢你的建议。我从来没有听说过图表不在DOM元素的范围之内。这将只剩下图像地图或插件用于交互式数据可视化？看起来是个不幸的设计。我同意，有时候哲学上完美的方法可能是浪费时间。但我宁愿知道做某事的正确方法，然后选择故意走捷径，而不是仅仅因为不知道其他方法而这样做。这在IE中还不起作用（9）。但我认为IE10会有它。注意，这使用了一个旧版本的flexbox语法：这是创造性的。它有一半像一张桌子。
<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

#container {
    height:10em;
    width:90%;
    border:1px solid black;

    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:box;

    -webkit-box-align:end;
}

#container > div {
    width:34%;
    border:1px solid red;

    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    box-flex:1.0;
}

#a {height:20%}
#b {height:50%}
#b {height:70%}

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <style type="text/css">
            .bar-container{
                float:left;
                height:100%;
                margin-right:10px;
                position:relative;
                width:30%;
            }
            .bar {
                border:1px solid black;
                bottom:0;
                position:absolute;
                width:98%;
            }

            .bar-1 {
                height:50px;
            }

            .bar-2 {
                height:100px;
            }

            .bar-3 {
                height:75px;
            }

            #graph {
                height:500px;
                margin:20px auto;
                position:relative;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id="graph">
            <div class="bar-container">
                <div class="bar bar-1">
                </div>
            </div>
            <div class="bar-container">
                <div class="bar bar-2">
                </div>
            </div>
            <div class="bar-container">
                <div class="bar bar-3">
                </div>
            </div>
        </div>      
    </body>
</html>