在多列底部对齐元素 [英] Aligning elements at the bottom of multiple columns

问题描述

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

I've got three unequal length columns of text and I want to put a button at the bottom of each column. I'm looking for a current method--preferably CSS only--of positioning the buttons so that they're at the same vertical position in the page when the columns are side-by-side (floated), and then are positioned after the relevant column when the layout is single column (on small screens). I don't necessarily need the columns to be equal length since they don't have backgrounds, unless that's part of the solution.

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

This is the code/description for the relevant section:

<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)，要么我不知道它们是否相关，也许是，但我看不到！).

I've tried lots of variations in code and placement, but I haven't been able to make it work. I've also found a few solutions, but they were either old (back to IE 5) or I couldn't figure out if they were relevant Maybe they were but I couldn't see it!).

将div列放在单独的div中在全屏上看起来不错，但是在小屏幕上，所有按钮都位于最后一列之后.

Placing them in a separate div after the column divs looks good on a full screen, but on a small screen all the buttons are positioned after the last column. Placed at the beginning or end of the columns has them positioned vertically based on the length of text in each column.

我尝试了position:absolute; bottom:0将其放置在div 2的底部，但效果不佳.任何想法/解决方案都非常感谢.

I tried position:absolute;bottom:0 to place them at the bottom of div 2, with poor results. Any ideas/solutions are much appreciated.

推荐答案

实际上，该表仅适用于更大的屏幕.可以肯定的是，使用文本部分之间的按钮，文本不会流入单个列.我使用display:和screenwidth媒体查询来交替显示/隐藏两组按钮，一组位于每列之后，而另一组则浮动在div中，位于所有列之后.我想我也可以制作两个版本，并使用媒体查询根据屏幕宽度显示/隐藏. jsfiddle.net/DTMgJ/5/上的jsfiddle还使用媒体查询和较大的负余量来解决该问题.

Actually, the table only works on wider screens. Pretty sure it won't flow the text into a single column with the buttons between text sections. I used display: and screen width media queries to alternately display/hide two sets of buttons, one set positioned after each column and one set floated in a div positioned after all the columns. I guess I could have also made two versions and used a media query to display/hide based on screen width. The jsfiddle at jsfiddle.net/DTMgJ/5/ also solves it using media queries and large negative margins.

这篇关于在多列底部对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！