Вертикальное выравнивание содержимого в Zurb Foundation

Question

Я создаю сайт с Zurb Foundation. Я хочу включить DIV. Этот div будет иметь две колонки. В левом столбце будет показано изображение. Второй столбец будет содержать абзац и кнопку. Я хочу, чтобы кнопка была вертикально выровнена относительно нижней части сетки. Другими словами, я хочу, чтобы нижняя часть моей кнопки совпадала с нижней частью моего изображения. В настоящее время я пытаюсь следующее:

<div class="sample"> 
    <h1>This is the title</h1> 
    <ul class="inline-list"> 
    <li>John Smith</li> 
    <li>October 12, 2013</li> 
    </ul> 

    <div class="row"> 
    <div class="large-5 columns"> 
     <div> 
     <img src="/images/paper.jpg" style="width:100%;" /> 
     </div> 
    </div> 

    <div class="large-7 columns" style="background-color:yellow;"> 
     <p>A paragraph will go here</p> 

     <a class="button small" href="[someUrl]"> 
     <span>keep reading</span>&nbsp; 
     <span class="icon-arrow-right5" style="font-weight:lighter; vertical-align:middle;"></span> 
     </a> 
    </div> 
    </div> 
</div> 

Я не могу получить «держать чтение» кнопку для вертикального выравнивания с нижней частью изображения в левой колонке. Есть ли способ сделать это в Zurb Foundation? Если да, то как?

Answer 1

Самый простой способ сделать это - поместить два контейнера (один для изображения и один для текста) рядом друг с другом, с текстовым полем абзаца и кнопкой в ​​текстовом контейнере.

Дайте блоку абзаца максимальную высоту приблизительно 70-80% высоты вашего изображения (в зависимости от ширины блока абзаца) и поместите переполнение: скрыто; на этом, если ваш текст будет длиться долго, и вы не хотите, чтобы ваш макет разбился. Поместите кнопку под полем фиксированной высоты с простым верхним краем, и вы должны быть хорошими.

Вы можете выровнять эти квадратики, которые я сделал с сеткой Zerb, чтобы сделать это, но сетка Zerb имеет только горизонтальные столбцы: вам нужно будет добавить эти вертикальные выравнивания для достижения своей цели.

Проверьте код здесь: http://jsfiddle.net/73fct/2/

HTML:

<div class="container"> 
    <div class="image-box"> 
     <img src="http://nutritionwonderland.com/wp-content/uploads/2010/10/bee-emrank-flickr-300x300.png" width="300" height="300" alt="A Honey Bee" /> 
    </div> 

    <div class="text-box"> 
     <p class="paragraph"> 
      Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. 
     </p> 
     <div class="button">Bees!</div> 
    </div> 
</div> 

CSS (фоны на элементы, чтобы показать структуру для вас):

.container { 
    min-width: 480px; 
} 

.image-box { 
    float: left; 
    position: relative; 
} 

.text-box { 
    background: #ffa3d0; 
    min-height: 300px; 
    float: left; 
    position: relative; 
    width: 180px; 
} 

.paragraph { 
    background: #a3cdff; 
    padding: 10px; 
    max-height: 205px; 
    overflow: hidden; 
} 

.button { 
    background: #c5ffa3; 
    margin: 5px auto; 
    padding: 10px; 
    text-align: center; 
    width: 50px; 
}