Динамический просчет ширины таблицы

MIT · February 15, 2010

Есть страница, на которой находятся 4 изображения в один ряд, примерно вот так:

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

И всё бы хорошо, вот только если страницу сильно сжимать по ширине, подобная конструкция не дает уменьшиться всей странице, выступая в качестве распорки.

По идее надо разбить ряд из четырёх изображений на две таблички, задать каждой ширину в 49.999% и прифлоатить к левой стороне:

Тогда страницу не будет распирать шириной сразу всех изображений, а при уменьшении ширины страницы вторая пара изображений с успехом будет перенесена на новую "строку".

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

Можно, конечно, сделать на JS, но не очень хочется из-за такой мелочи прикреплять jQuery (ради onResize для IE).

У кого есть какие-либо соображения по вопросу?

s0rr0w · February 15, 2010

А можно использовать float: left;

MehOlOLBuC · February 16, 2010

а если реализовать на списках?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{width:100%; height:100%; line-height:1;}
*{margin:0; padding:0; border:0; outline:0; vertical-align:baseline;}
  #menu {text-align:center;}
  #menu div {display: table;margin: 0 auto;}
  #menu ul {list-style:none;} 
  #menu li {display:inline;}
</style>
</head>

<body>
	<div id="menu">
		<div>
			  <ul>
					<li><a href="#"><img src="sunrise.jpg" alt="" /></a></li>
					<li><a href="#"><img src="sunrise.jpg" alt="" /></a></li>
					<li><a href="#"><img src="sunrise.jpg" alt="" /></a></li>
					<li><a href="#"><img src="sunrise.jpg" alt="" /></a></li>
			  </ul>
		</div>		  
	</div>
</body>
</html>

MIT · February 16, 2010

По идее надо разбить ряд из четырёх изображений на две таблички, задать каждой ширину в 49.999% и прифлоатить к левой стороне:

А можно использовать float: left;

Ну я какбэ знаю что можно. Даже использовал. Можно огласить полную мысль?

а если реализовать на списках?

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

MehOlOLBuC · February 17, 2010

Есть страница, на которой находятся 4 изображения в один ряд, примерно вот так:

тогда можно задать li ширину, будет работать как предыдущий пример, но расстояния между изображениями будут одинаковыми

ul{width:100%;}

ul li{float:left; width:25%; text-align:center;}

Edited February 17, 2010 by MehOlOLBuC

Sign In

Динамический просчет ширины таблицы

Question

MIT

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

MehOlOLBuC

Link to comment

Share on other sites

MIT

Link to comment

Share on other sites

MehOlOLBuC

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information