Небольшая задачка

Dioni$$ · November 17, 2010

Часто приходится сталкиваться с такой ну не то что проблемкой.

Вобщем разметка типа такого

Есть у нас родительский блок, а внутри него блоки поменьше.

И надо чтобы крайние блоки прижимались к краям контейнера.

Как я это делаю

HTML

<div class="container">

   <div class="block"></div>
   <div class="block"></div>
   <div class="block last"></div>

   <div class="block"></div>
   <div class="block"></div>
   <div class="block last"></div>

   <div class="block"></div>
   <div class="block"></div>
   <div class="block last"></div>

</div>

CSS

.block {float:left;margin:0 30px 30px 0;} /*к примеру*/
.last {margin:0 0 30px}

А как вы такое верстаете?

MC WEST · November 17, 2010

Я обычно делаю точно также, или добавляю класс :last-child если блоки идут в один ряд.

Также в твоем случае с помощью псевдоклассов, можно у каждого третьего блока убрать отступ срава.

psywalker · November 17, 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>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
		#wrap { 
			width: 380px; 
			margin: 0  auto; 
			background: #060; 
			overflow: hidden;
		}
		ul { 
			list-style: none; 
			width: 420px;
			float: left; 
			margin-left: -20px;
		}
			ul li { 
				width: 100px; 
				height: 100px; 
				background: #0C0; 
				float: left;
				margin: 20px;
			}

</style>
</head>

<body>
	<div id="wrap">
		<ul id="menu">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>	
	</div>
</body>
</html>

clavin · November 17, 2010

Автору топика следует уточнить, что за макет - фиксированный или резиновый. Если фиксированный, то там всё просто делается с помощью float.

Dioni$$ · November 17, 2010

psywalker - спасибо - прикольный вариант.

Можно ли то же реализовать для резины?

clavin - интересуют оба варианта конечно же

psywalker · November 17, 2010

psywalker - спасибо - прикольный вариант.
Можно ли то же реализовать для резины?

Ну даже не знаю, может что-то типа того:

<!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>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}

		#wrap {
			margin: 0 auto;
			background: red;
			width: 60%;
			margin: 0 auto;
		}


		ul {
			list-style: none;
			margin: 0 -20px;
			text-align: justify;

		}
			ul li {
				width: 100px;
				height: 100px;
				background: #0C0;
				margin: 20px;
				display: inline-block;

			}
			ul li.help { margin: 0; height: 0; background: none; width: 100%;}

</style>
</head>

<body>

	<div id="wrap">
		<ul id="menu">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li class="help"></li>
		</ul>	
	</div>

</body>
</html>

mini · November 19, 2010

psywalker а если к примеру убрать явную высоту у "li", и наполнить каждую текстом причем разным по количеству?

Sign In

Небольшая задачка

Question

Dioni$$

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

MC WEST

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Dioni$$

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mini

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information