如何在一个容器中底部对齐多个 inline-block div 而不会丢失它们的流？

Posted 2023-03-05

【中文标题】如何在一个容器中底部对齐多个 inline-block div 而不会丢失它们的流？

【英文标题】：How can I bottom align multiple inline-block divs in one container without losing their flow?

【发布时间】：2012-06-19 14:15:34

【问题描述】：

这是我正在处理的一个非常简单的条形图，

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

如果我将容器设置为相对，内部 div 设置为绝对和底部：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%;

tdwidth:33.333%;vertical-align:bottom;
td > div​background-color:black;​color:cyan;​

那么有没有更好的方法来做到这一点，比如使用 webkit flexbox 之类的？

【问题讨论】：

尝试给它们相对定位。

@Jrod 相对与绝对的术语在 css 中让我感到困惑。为了确定，我尝试了两种方法。它仍然是颠倒的。

你能举个例子说明你在争取什么和你想要什么？

我对你目前拥有的东西和你想要得到的东西有点困惑。子 div 元素是图表中的条形吗？你能详细说明一下吗？这似乎对我来说是一致的...jsfiddle.net/ZjMp5

***.com/questions/6116423/…

【参考方案1】：

绝对定位时对我有用：

<style type='text/css'>
#container
 position  :relative;
 border    :1px solid #000;
 height    :60px;
 width     :100px;

 .b
   position:absolute;
   width   :20px;
   bottom  :0
  
 .b1background:blue  ;height:10px; left:0px
 .b2background:red   ;height:30px; left:30px;
 .b3background: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.

【讨论】：

我本可以这样做，但我试图保持流畅以避免使用left:_px。我想知道您是否需要为此使用表格或弹性框。我尽可能远离像素。

这实际上似乎是***在用户配置文件视图中的rep条形图。

@Benjamin：我同意你的理念，但你可以花几周时间尝试以“最佳实践”的方式做这样的事情——尤其是当你的图表开始变得更多时复杂或您开始添加更多功能。不要忘记 DOM 元素并不是真正用于“图表”或“图形”的......这意味着当您将它们用于语义页面布局之外的创造性事物时，您可以在线条之外稍微着色。

@Benjamin：另外，这可能只是我，我发现使用 :px 的绝对定位通常是以无头痛的方式实现跨浏览器兼容结果的最快方法（除了使用 .js 图表库之外）。由于绝对定位所基于的 x/y 坐标系的直观性，维护使用绝对位置设计的图表应用程序也更容易。我相信你会发现有一百万人在尖叫“那是错误的！它不是语义的！”。对他们来说，我会争辩说它有效，它得到了结果，而且我能够更快地进入下一个项目任务。

感谢您的建议。我从未听说图表超出了 DOM 元素的范围。那将只留下用于交互式数据可视化的图像地图或插件？似乎是一个不幸的设计。我同意有时哲学上完美的方法可能是浪费时间。但我宁愿知道做某事的正确方法，然后可以选择走一条刻意的捷径，而不是仅仅因为不知道其他方式而去做。

【参考方案2】：

这适用于我的浏览器 (Chrome 19)

html

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

css

#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%

http://jsfiddle.net/benstenson/m6vR7/

【讨论】：

这在 IE 中还不起作用 (9)。但我认为 IE 10 会有它。

请注意，这里使用的是旧版本的 flexbox 语法：css-tricks.com/old-flexbox-and-new-flexbox

【参考方案3】：

这是另一种方法。每个条都需要一个额外的包装。这个想法是制作几列.bar-container，它们跨越了条形的正确宽度和#graph的整个高度。

<!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>

【讨论】：

这很有创意。一半像一张桌子。