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

У меня есть три столбца текста разной длины, и я хочу поместить кнопку внизу каждого столбца. Я ищу текущий метод - предпочтительно только 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), либо я не мог понять, актуальны ли они. Может быть, они были, но я этого не видел!).

Размещение их в отдельном блоке после блоков столбцов выглядит хорошо на полном экране, но на маленьком экране все кнопки располагаются после последнего столбца. При размещении в начале или конце столбцов они располагаются вертикально в зависимости от длины текста в каждом столбце.

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


html css multiple-columns positioning
person JYN    schedule 11.10.2013    source источник
comment
position:abolute; bottom:0; будет работать только в том случае, если рассматриваемый элемент также имеет высоту.   -  person 1934286    schedule 11.10.2013
comment
Если я позиционирую:absolute в столбце div (div 4), это выглядит хорошо, но кнопки не обязательно выровнены по странице, поскольку содержимое имеет разную длину. Pos:abs to div 2 означает, что элементы больше не выровнены со столбцами. Я думаю, что установка их на pos:abs в div 4, а затем принуждение столбцов к одинаковой высоте с помощью JS может быть единственным способом сделать это, но я надеялся, что есть относительно простой способ сделать это с помощью css.   -  person JYN    schedule 11.10.2013
comment
Можете ли вы сделать jsfiddle, пожалуйста. Я попытался воспроизвести ваш код, но, кажется, что-то упустил.   -  person 1934286    schedule 11.10.2013

Ответы (2)


arrow_upward
1
arrow_downward

Единственное решение, отличное от 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; будет работать.

person Ryan Willis    schedule 11.10.2013
comment
Вот наглядный пример: http://jsfiddle.net/Pg7AS/ - person Ryan Willis; 11.10.2013
comment
Таблица делает именно то, что я ищу, но я просто подумал, что к настоящему времени есть способ сделать это css. Я думаю, что способ css на самом деле является способом css + js. Я думаю, что jsfiddle.net/DTMgJ/5 решает проблему, но я не работал над этим знать наверняка. - person JYN; 11.10.2013

arrow_upward
0
arrow_downward

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

person JYN    schedule 12.10.2013