Выравнивание элементов в нижней части нескольких столбцов

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 после того, как разделители столбцов выглядят хорошо на полном экране, но на маленьком экране все кнопки расположены после последнего столбца. Размещенные в начале или конце столбцов, они располагаются вертикально на основе длины текста в каждом столбце.

Я попытался положение: абсолютное; нижнее: 0, чтобы разместить их внизу двоего div 2, с плохими результатами. Любые идеи/решения высоко ценятся.

Answer 1

Фактически, таблица работает только на более широких экранах. Довольно уверен, что он не будет передавать текст в один столбец с помощью кнопок между текстовыми разделами. Я использовал запросы отображения и ширины экрана, чтобы поочередно отображать/скрывать два набора кнопок, один набор, расположенный после каждого столбца, и один набор, размещенный в div, расположенный после всех столбцов. Думаю, я мог бы также сделать две версии и использовать медиа-запрос для отображения/скрытия на основе ширины экрана. Jsfiddle at jsfiddle.net/DTMgJ/5/ также решает его с помощью медиа-запросов и больших отрицательных полей.

Answer 2

Единственное решение, не относящееся к 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 для каждой ячейки.

В противном случае, вы можете перебрать каждый div элемента с JQuery или чистым JavaScript, найти самую большую высоту, хранить его в переменном, а затем цикле обратно через div элементов, содержащих кнопку и установить каждую высоту в соответствии с переменным. Тогда будет работать position:absolute;bottom:0px;.