在多列底部对齐元素答案

【问题标题】：Aligning elements at the bottom of multiple columns在多列底部对齐元素
【发布时间】：2013-10-11 01:42:34
【问题描述】：

我有三个长度不等的文本列，我想在每列的底部放置一个按钮。我正在寻找一种当前的方法（最好是仅 CSS）来定位按钮，以便当列并排（浮动）时它们在页面中的相同垂直位置，然后定位在之后布局为单列时的相关列（在小屏幕上）。我不一定需要列长度相等，因为它们没有背景，除非这是解决方案的一部分。

这是相关部分的代码/说明：

<div 1 - position:relative>
   <div 2 - display:block;overflow:hidden>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image1.jpg" />
            <h1>Title 1</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image2.jpg" />
            <h1>Title 2</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
      <div 3 - position:relative; float:left>
         <div 4 - display:block>
            <img src="image3.jpg" />
            <h1>Title 3</h1>
            <p> Column 1 text</p>
         </div 4>
      </div 3>
   </div 2>
</div 1>

我在代码和布局方面尝试了很多变化，但我无法让它发挥作用。我还找到了一些解决方案，但它们要么是旧的（回到 IE 5），要么我不知道它们是否相关也许它们是相关的，但我看不到它！）。

将它们放在一个单独的 div 之后，列 div 在全屏上看起来不错，但在小屏幕上，所有按钮都位于最后一列之后。放置在列的开头或结尾会使它们根据每列中的文本长度垂直定位。

我尝试使用 position:absolute;bottom:0 将它们放在 div 2 的底部，但效果不佳。非常感谢任何想法/解决方案。

【问题讨论】：

position:abolute; bottom:0; 仅在相关元素也有高度时才有效。
如果我定位：绝对到列 div (div 4)，它看起来不错，但按钮不一定在页面上对齐，因为内容的长度不同。 Pos:abs 到 div 2 意味着元素不再与列对齐。我认为将它们设置为 pos:abs 到 div 4，然后使用 JS 将列强制设置为相同的高度可能是唯一的方法，但我希望有一种相对简单的方法来处理 via css 。
你能做一个jsfiddle吗？ I tried to reproduce your code 但我想我错过了一些东西。

标签： html css positioning multiple-columns

【解决方案1】：

我能想到的唯一非 JS 解决方案就是将其设为表格。

<table valign=top cellspacing=18px>
<tr>
    <td align=center><h2>Title 2</h2></td>
    <td align=center><h2>Title 2</h2></td>
    <td align=center><h2>Title 3</h2></td>
</tr>
<tr>
    <td valign=top>
        <img src="image1.jpg" />
        Column 1 text
    </td>
    <td valign=top>
        <img src="image2.jpg" />
        You looked me dead in the eye and told me you were dying.<br />
        And then there was no light on the earth.<br />
        But what you saw in me that night was not a light.<br />
        Only Darkness.
    </td>
    <td valign=top>
        <img src="image3.jpg" />
        Column 3 text
    </td>
</tr>
<tr>
    <td align=center><button>Hello</button></td>
    <td align=center><button>There</button></td>
    <td align=center><button>Sir  </button></td>
 </tr>


</table>

这段代码给出了想要的结果，你可以乱用每个单元格的 css。

否则，您可以使用 jQuery 或纯 JavaScript 循环遍历每个 div 元素，找到最大高度，将其存储在变量中，然后循环遍历包含按钮的 div 元素并根据多变的。然后position:absolute;bottom:0px; 就可以了。

【讨论】：

这是一个可见的例子：http://jsfiddle.net/Pg7AS/
该表完全符合我的要求，但我只是想现在有一种 css 方法可以做到这一点。我猜css方式真的是css + js方式。我认为jsfiddle.net/DTMgJ/5 解决了这个问题，但我还没有确定。

【解决方案2】：

实际上，该表格仅适用于更宽的屏幕。很确定它不会将文本流到带有文本部分之间按钮的单列中。我使用 display: 和屏幕宽度媒体查询来交替显示/隐藏两组按钮，一组位于每列之后，一组浮动在位于所有列之后的 div 中。我想我也可以制作两个版本并使用媒体查询根据屏幕宽度显示/隐藏。 jsfiddle.net/DTMgJ/5/ 上的 jsfiddle 也使用媒体查询和较大的负边距解决了这个问题。

【讨论】：