Question

我有三个不等长的文本列，我想在每列的底部放一个按钮。我正在寻找一种当前的方法 - 最好只有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的底部，效果不佳。任何想法/解决方案都非常感谢。

Answer 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;就可以了。

Answer 2

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

对齐多列底部的元素

2 个答案: