Эмуляция ячеек таблицы с помощью слоев

d0ublezer0 · May 26, 2010

Всем здрасте.

Имеем блоки с картинкой товара, его названием и ценой. Блоки фиксированной ширины, имеют стиль float:left;

Т.к. название обычно разной длины, блоки растягиваются внутренним содержимым по высоте.

Пример того, что получается, можно посмотреть на этой странице.

Как видно из моего состояния страницы, из-за разницы в высоте блоков некоторые из них располагаются в хаотичном порядке. Так сказать, кому места хватило - тот и влез.

Цель - либо выровнять высоту самих блоков, либо как-то заставить блоки понимать, какой отступ снизу/сверху они должны использовать, чтобы таблички располагались ровно.

Делать таблицей уж очень не хочется..

Edited May 26, 2010 by d0ublezer0

Searcher · May 26, 2010

Без скриптов никак не выровнять. Проще стандартизировать высоту блоков. Картинки надо приводить к одной высоте, для подписей оставлять 2-3 строки.

psywalker · May 26, 2010

ТС, позже выложу скрипт, у меня был дома на компе.

SelenIT · May 26, 2010

Как вариант, можно прибегнуть к "магии" inline-block (см. напр. http://blog.grakhov.com/post/99406348/inline-block). Правда, там есть свои сюрпризы (напр., пробелы между тегами учитываются), но задачу размещения разновысоких блоков в строку оно решает...

Searcher · May 26, 2010

Кстати, не вижу смысла заморачиваться, сайт фикс., так что лучше таблицей сделать. Если б резина была - другое дело, а тут, нет - просто таблица и глюков меньше, и скриптов не будет, и быстрее сверстать.

psywalker · May 26, 2010

Как вариант, можно прибегнуть к "магии" inline-block (см. напр. http://blog.grakhov.com/post/99406348/inline-block). Правда, там есть свои сюрпризы (напр., пробелы между тегами учитываются), но задачу размещения разновысоких блоков в строку оно решает...

Да, но ведь этот вариант не справится с одинаковой высотой соседних ячеек, даже если они пустые?

sigma77 · May 26, 2010

d0ublezer0,

А почему просто не задать всем блокам одинаковую высоту?

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

Можете тут еще посмотреть.

SelenIT · May 26, 2010

этот вариант не справится с одинаковой высотой соседних ячеек

Конечно . Мое предложение относилось к условию

либо как-то заставить блоки понимать, какой отступ снизу/сверху они должны использовать, чтобы таблички располагались ровно

d0ublezer0 · May 26, 2010

Друзья, вы все правы, и все эти варианты я уже прокручивал в голове, но идеального решения так и не нашел.

Вариантов несколько:

1.Сделать блоки равной высоты, задав принудительно высоту каждому элементу.

Минус раз - нельзя заранее определить, какой длины будет текст.

Вариант решения - наложить сверху полупрозрачный градиент PNG, получится некий эффект исчезания текста

Минус два - при коротком тексте будут "дыры".

2.Таблицы как инструмент разметки (самый простой)

Минус - расстояние по вертикали между блоками останется "плавающим".

3. Скрипты (?)

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

Sigma77, попробую предложенное вами решение.

читал ведь уже, только из головы вылетело

psywalker · May 26, 2010

d0ublezer0, держи, правда вариант со скриптом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	 <title>sameHeight</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <style type="text/css">
	 <!--
	 body{
		  margin:0; background: #033;
	 }
	 .box{
		  float:left;
		  width:30%;
		  margin-left: 2%;

	 }


	 p { padding: 0 10px;}
	 -->
	 </style>
	 <script type="text/javascript">
	 <!--
	 function initScript(){
		  startSameHeight();
		  window.onresize=function(){startSameHeight()};
	 }
	 function startSameHeight(){
		  sameHeight({
			   tagName:'div',
			   tagClass:'box'
		  });
		  sameHeight({
			   tagName:'div',
			   tagClass:'block'
		  });
		  sameHeight({
			   tagName:'span',
			   tagClass:'element'
		  });
	 }

	 function sameHeight(_options){
		  var _tagName=_options.tagName;
		  var _tagClass=_options.tagClass;
		  var maxHeight=0;
		  var _elements=document.getElementsByTagName(_tagName)
		  var re=eval('/'+_tagClass+'\\'+'b/');

		  if(_elements){
			   for(var i=0;i<_elements.length;i++){
					if(re.test(_elements[i].className)){
						 _elements[i].style.height='auto';
						 if(_elements[i].offsetHeight>=maxHeight){
							  maxHeight=_elements[i].offsetHeight;
						 }
					}
			   }
			   for(var i=0;i<_elements.length;i++){
					if(re.test(_elements[i].className)){
						 _elements[i].style.height=maxHeight+'px';
					}
			   }
		  }
	 }

	 if(window.addEventListener){
		  window.addEventListener("load",initScript,false);
	 }else if(window.attachEvent){
		  window.attachEvent("onload",initScript);
	 }
	 //-->
	 </script>
</head>
<body>
<!-- wrapper -->

<div id="wrapper">

		  <p>t</p>
	 </div>
	 <div class="box" style="background:#c33">
		  <p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p>
	 </div>
	 <div class="box" style="background:#33c">
		  <p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>

		  <p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
					<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		  <p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
					<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		  <p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
	 </div>

	 <div class="box" style="background:#3c3">
		  <p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		  <p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
	 </div>

</div>
<!-- end wrapper -->
</body>
</html>

d0ublezer0 · June 2, 2010

Всё-таки я решил сделать карточки фиксированной высоты.

Не влезающие строки закрыл градиентом: вот так

Одна только проблема появилась - градиент мешает нажать на ссылку

Edited June 2, 2010 by d0ublezer0

Sign In

Эмуляция ячеек таблицы с помощью слоев

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information