Выровнять div с верхней частью контейнера

У меня есть неупорядоченный список, предназначенный для отображения по горизонтали. Один из элементов li содержит элемент div. Этот элемент div заполняется с помощью ajax, хотя это не имеет значения.Выровнять div с верхней частью контейнера

Элемент div имеет большую высоту, чем остальные элементы li, и по умолчанию он выравнивается со дном родительского контейнера.

Обновление: Ну, это не так неудобно. Я закодировал более простой пример в jsfiddle http://jsfiddle.net/Bfp3K/, и он работает правильно. Я должен снова проверить свой код, чтобы получить ошибку в песочнице.

Update2: Все было не так просто. Я добавил свое предлагаемое (и использованное) решение.

Обновление3: проигнорируйте предыдущий ответ, это было неверно. Это упрощенный и проверяемый пример задачи:

JSFiddle: http://jsfiddle.net/Bfp3K/10/

CSS:

#one { 
    background-color:red; 
} 
#two { 
    background-color:green; 
} 
#three { 
    background-color:yellow; 
} 
#four { 
    background-color:blue; 
} 
.normal { 
    height:100px; 
    width:200px; 
    display:inline-block; 

} 
.big { 
    height:200px; 
    width:300px; 
    display:inline-block; 
} 

ul { 
    display:block; 
} 

ul li{ 
    display:inline; 
}

HTML:

<ul> 

<li><div id="one" class="normal">One</div></li> 
<li><div id="two" class="normal">Two</div></li> 
<li><div id="three" class="normal">Three</div></li> 
<li><div id="four" class="big"> 
    The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs. 

</div></li> 
</ul>

Изображение:

Что решение должно выглядят так: Accetable solution Что проблема выглядит следующим образом: Current Problem

источник

2013-06-28 GCon

Вы можете оставить некоторые из текущего HTML и CSS, пожалуйста? – LazerSharks

Нет кода, не могу помочь ... – Terry

Ницца. Вы всегда можете ответить на свой вопрос haha – LazerSharks

Просто замените объявления display:inline-block; на float:left; Поскольку вы все равно указываете размеры, вам не нужно inline-block. jsFiddle работает, и вот фото. enter image description here

.normal { 
    height:100px; 
    width:200px; 
    float:left;} 

.big { 
    height:200px; 
    width:300px; 
    float:left;}

источник

2013-06-29 01:23:24 frenchie

Хотя это решает проблему в jsfiddle, в моем проекте большая часть divs динамична и не имеет конкретных измерений. – GCon

Ну, если вы удалите конкретные размеры из jsFiddle, вы все равно получите тот же результат: все вершины выровнены. Кроме того, когда вы задаете вопрос, он помогает включать все аспекты, которые применяются. – frenchie

Привет! Спасибо за ваше время :) У меня был сложный код раньше, на основе кода, который я использовал. Я не мог опубликовать код, потому что он является частью веб-приложения tomcat. Не могли бы вы прокомментировать использование вертикального выравнивания: сверху вместо float: left? Кажется, что это работает, но я боюсь, что добавление кода может иметь побочные эффекты. (Очевидно, что я только начал веб-разработку) – GCon

Установите Л.И. line-height на ту же высоту пикселя изображения.

источник

2013-06-28 20:31:37

Я пробовал это первым, потому что это был самый простой тест. Когда div содержит только ссылку (вход), она отображается ниже других. После создания теста на jsfiddle я вижу, что поведение по умолчанию - это то, что я ищу - и нарушил это поведение с некоторыми из моего кода. Я не могу найти, что может быть причиной этого. – GCon

Можете ли вы разместить свой код на JSFiddle или что-то подобное? –

Мой код основан на tomcat. Я попытаюсь сохранить подписанную и подписанную версию и загрузить ссылки. Спасибо за помощь! – GCon

Решение 1 (быстрая и грязная): установить margin-bottom: [negative value here] или bottom: [negative value here] если ваш li расположены относительно друг друга и DIV абсолютно позиционирован. Это предполагает, что вы знаете точные значения.

Решение 2: Я предполагаю, что текст в других элементах - это ссылки. Установить верхний и нижний заполнение для этих ссылок (в частности, <a> метки, так что они расположены вертикально выровненных по центру)

Раствор 3 (немного больше HTML): Поместите две дивы в каждом ли. Оберните div, который у вас уже есть в другом div снова. Используйте вертикальный метод центрирования (например, метод таблицы-ячейки) для вертикального центрирования всех внутренних div. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (The li тегов у вас уже есть, возможно, уже работают в качестве внешней обертки сНа, но я не уверен, не получили, чтобы проверить, что еще.)

источник

2013-06-28 20:36:57 LazerSharks

обновился (снизу совмещается):

<html> 
<head> 
<style> 
li { 
    display:inline-block; 
} 
.item { 
    vertical-align: bottom; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li>Text 1</li> 
    <li><div class="item">Text 2<img src="some.jpg"/></div></li> 
    <li>Text 3</li> 
</ul> 
</body> 
</html>

источник

2013-06-28 20:44:11 kikudjiro

Как сменить список на divs, чтобы решить что-нибудь? – cimmanon

все тексты были бы выровнены по верхнему краю – kikudjiro

Это фактически сработало, просто изменив вертикальное выравнивание: снизу до вертикального-выравнивания: сверху. Из того, что я понимаю, это плохая практика при использовании элементов, отличных от таблицы. – GCon

В коде, отправленном в вопрос, у LI есть дисплей: встроенный, а в «более простом примере» jsfiddle их дисплей сбрасывается в встроенный блок (через классы). Inline-блок отличается от встроенного, что он изолирует любое содержимое уровня блока (например, DIV) внутри, в то время как попытка поместить что-то на уровне блока в строку inline приводит к тому, что встроенный элемент разбивается на несколько так называемых anonymous block boxes. Может быть, это и есть причина?

источник

2013-06-28 21:23:27

Решение было очень просто в конце концов. На основании другой ответ:

li div{ 
    vertical-align:top; 

}

Поскольку элементы имеют дисплей: встроенный блок;, добавив вертикальное выравнивание: верх, кажется, решает его. Я не буду отмечать это как решение, если это не правильное решение.

http://jsfiddle.net/dv3Mm/

источник

2013-06-29 01:29:57 GCon

Выровнять div с верхней частью контейнера

ответ

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