Javascript-форум - Применить свойство аттрибута height для каждого ul li элемента

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Применить свойство аттрибута height для каждого ul li элемента (https://javascript.ru/forum/jquery/30827-primenit-svojjstvo-attributa-height-dlya-kazhdogo-ul-li-ehlementa.html)

Применить свойство аттрибута height для каждого ul li элемента

Добрый день.

Не пойму как можно применить свойство аттрибута height для каждого ul li элемента.

Есть структура списка

...
<div class="list">
<ul class="no_mark">
<li id="<?=$i?>"><img src="<?=$src?>"/>Фото номер <?=$i?></li>
</ul>
</div>
...

Проблема в том что картинки все разного размера , и из за этого li у которых маленькие картинки идут с "пустыми местами" после фоток, у больших все норм так как они растягиваються во весь ли.

Решил сделать такой код который бы убирал "пустые места".

<script type="text/javascript">
$(document).ready(function(){
      $('a.NaviIco').click(function(){
        for(var i=0;i<$('.list ul li').size();i++){
           if($('.list ul li img').eq(i).height() < '70' )
               $('.list ul li').eq(i).css('height','100px');
        }
	      });
});
</script>

не пашет :no: (точнее пашет,но немного неправильно чтоли =))

Может есть другие способы какие-нибудь?

PS:К сожалению размер фото просто нельзя поменять.

any.zicky,
Выставьте приемлимый общий размер для картинки

<img height="45" src="<?=$src?>"/>Фото номер <?=$i?>

Может не правильно написал, размер я допустим поменяю,все вроде норм стало,а вот к тексту ФОТО Номер {i} , в дальнейшем добавиться Descripton из БД, соответственно текст в некоторых ли больше станет и height будет разниться :( Смысл в том что нужно пройти каждый li посмотреть в зависимости от текста его размер и если текста мало, то height сделать меньше.

any.zicky,
Выложите Пару примеров с текстом и картинкой
И потом - почему не оставить Автовысоту <li> ? заранее не выставляя ему размер ? - отступы же задаёте padding

- норм как должно быть

- пустые места

Всмысли в css li поставить height:auto?

any.zicky,
HTML код со стилем - не картинки (Или в Фш править ? (Хотя они тоже полезны

<div class="list">
	<ul class="no_mark">
<?foreach($ListItems as $arItem):?>
	<li id="<?=$id?>">
		<p><?=$arItem['PREVIEW_TEXT']?></p>
		<div class="review-logo"><?if(is_array($arItem['PREVIEW_PICTURE'])):?><img src="<?=$arItem['PREVIEW_PICTURE']['SRC']?>" alt="<?=$arItem['PREVIEW_PICTURE']['DESCRIPTION']?>" /><?endif?></div>
		<div class="review-author">
			<?if($arItem['DISPLAY_PROPERTIES']['AUTHOR']):?><strong><?=$arItem['DISPLAY_PROPERTIES']['AUTHOR']['VALUE']?></strong><?endif?>
			<?if($arItem['DISPLAY_PROPERTIES']['JOB']):?><?=$arItem['DISPLAY_PROPERTIES']['JOB']['VALUE']?><?endif?> (<?=$arItem['NAME']?>)
		</div>
	</li>
<?endforeach;?>
	</ul>
</div>

Код такой.

Код:

.list p{

        padding:0 0 12px 0; margin:0 0 12px 0;

        border-bottom:#e3e3e3 1px solid;

        color:#666; line-height:18px; font-size:12px;}



.review-logo{

        float:left;

        width:40px;

        text-align:center;}

.review-logo img{

        max-width:auto; height:auto;}

.review-author{

        float:right;

        width:155px;}

.review-author{

        color:#666; font-size:12px; line-height:18px;}

.review-author strong{

        font-weight:400; color:#333;}





.list{

        overflow:hidden; position:relative;

        width:242px; margin-bottom:12px;}

.list ul{

        position:relative;

        width:30000px;}

.list ul li{

        width:242px; float:left; overflow:hidden;

        padding:0 0 10px 0;

        font-size:12px; line-height:16px; color:#666;}

Вот css.

Цитата:

Сообщение от any.zicky

Не пойму как можно применить свойство аттрибута height для каждого ul li элемента.

Типа набросок...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.no_mark li {
	height: 100px;
	border: 1px solid;
}
#scr1 img {
	height: 30px;
}
#scr2 img {
	height: 50px;
}
#scr3 img {
	height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('button').click(function (){
		$('.no_mark img').each(function (){
			var h=$(this).height();
			h=(h+5)+'px';
			this.parentNode.style.height=h;
		});
	});
});
</script>
</head>
<body>
<div class="list">
	<ul class="no_mark">
		<li id='scr1'><img src="http://javascript.ru/forum/images/smilies/smile.gif" />Фото номер 1</li>
		<li id='scr2'><img src="http://javascript.ru/forum/images/smilies/smile.gif" />Фото номер 2</li>
		<li id='scr3'><img src="http://javascript.ru/forum/images/smilies/smile.gif" />Фото номер 3</li>
	</ul>
</div>
<button>Go</button>
</body>
</html>

У меня код мой первый делает тоже самое :yes: Спасибо большое всем, оставил так как написал {ksa} ,ток цикл по li. Предложили еще вариант о том что Description сократить до трех строк ,а потом в div'e скрытом его полностью раскрывать как на картинках,увеличивая заодно height li.