Плавающие контейнеры так, чтобы они были внизу внизу

У меня есть список ul, в котором есть несколько элементов li, которые необходимо поместить слева. Каждое li содержит изображение переменной высоты либо 150px, либо 200px. Итак, мы получаем несколько ящиков (li) с изображениями внутри них. Это точный HTML внутри литийПлавающие контейнеры так, чтобы они были внизу внизу

<li class="photo"> 
<a href="#" class="photo-link"> 
     <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img"> 
     <span class="photo-title">MrSpock</span> 
    </a> 
</li>

Теперь, если изображение в какой-либо из элементов Li имеет высоту 200px и прилегающая Ли изображение высотой 150px, литиево с изображением 150px высоты складывает на верхний правый край li с высотой 200px. (Помните, что оба плавают слева)

Я хочу, чтобы элементы li складывались, как если бы они были коробками с разной высотой, хранящимися на полу.

Ограничения: я не могу изменить этот html, может быть несколько элементов li, и в этом случае изображения будут перемещаться в следующую строку. Мы не знаем заранее, если все изображения в строке будут одинаковыми или разной.

Возможно ли решение только для CSS? Heres ссылка на мою проблему: https://dl.dropboxusercontent.com/u/88049315/home.html Я хочу, чтобы контейнеры в первой строке были выровнены внизу.

источник

2014-02-02 uiboy

Почему вы не можете изменить html? –

что css вы пробовали? – otherDewi

Ну, честно говоря, его часть задачи, которую я делаю, имеет ограничение, которое html не может быть изменено. Но даже в реальном мире я слышал сценарии, в которых сайты используют CMS, и иногда они откуда-то получают html и хотят, чтобы вы использовали стиль только с использованием этого html. @otherDewi: см. Ссылку, предоставленную моей попытке, первоначальный вызов потребовал от меня выравнивания контейнеров в строках и всего, что я сделал, но не могу получить этот контейнер с MrSpock, чтобы выровнять его по нижнему краю. – uiboy

Как насчет этого fiddle?

<div id="container"> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
</div>

#container 
    { 
     width:200px; 
     height:200px; 
     background-color:#333; 
     display:table-cell; 
     vertical-align:bottom 
    } 

    .content 
    { 
     width:48px; 
     height:48px; 
     background-color:red; 
     float:left; 
     margin: 1px; 
    }

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

В противном случае вы можете повернуть контейнер-контейнер, чтобы все содержимое содержалось в нем. Это скорее хакерский подход и может привести к дальнейшим проблемам. The Fiddle

источник

2014-02-02 12:52:51 Madmenyo

Благодарим вас за ответ Menno. Здесь вы установили ширину .content, в моем случае, к сожалению, это может варьироваться - в зависимости от высоты изображения 200px или 150px. Но я все еще хочу, чтобы нижний край контейнера был выровнен со всеми другими контейнерами в той же строке. – uiboy

Плавающие контейнеры так, чтобы они были внизу внизу

ответ

Смежные вопросы