Варавнивание нескольких плавающих блоков с растяжкой

airscape · December 17, 2010

Привет!

После изучения статей по выравниванию блоков по горизонтали так и не получилось решить следующую задачу.

<html>
<head>
	<title>Untitled</title>

<style type="text/css">
.cont
{
float:left;
}
</style>
</head>

<body>

<div align="center" style="border:solid 1 lime;">

<div style="border:solid 1 red;background:orange;" class="cont">блок-контент 1</div>
<div style="border:solid 1 red;background:yellow;width:300px" class="cont">блок-контент 2 (ширина задана,фикс)</div>
<div style="border:solid 1 red;background:orange;" class="cont">блок-контент 3</div>
<div style="clear:both"></div>


</div>



</body>
</html>

Есть 3 плавающих блока с конетентом (блоки 1,2,3 ; блок 2 - посередине ), у блоков выставлено float:left (чтобы выстроились горизонтально, кстати, может в данной задаче так не стоит делать их плавающими?).

Блок 2, то есть центральный блок, имеет фиксированную ширину(напр. 300px) и находится между двумя другими блоками 1,3.

Необходимо выравнять все 3 блока по центру внутри родительского контейнера, то есть чтобы эта троица стояла в центре родительского контейнера и была отцентрирована по горизонтали, и сделать так чтобы ширина крайних блоков 1,3 растягивалась во всю оставшуюся ширину страницы до её краёв.

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

Как это можно было бы осуществить или укажите похожий пример пожалуйста.

Спасибо

Stahanovec · December 17, 2010

выравниваются по центру, только вот средний блок не ограничивается 300px

<html>
<head>
	<title>Untitled</title>

<style type="text/css">
.cont
{
display: inline;
}
</style>
</head>

<body>

<div style="border:solid 1 lime;text-align:center;">

<div style="border:solid 1 red;background:orange;" class="cont">блок-контент 1</div>
<div style="border:solid 1 red;background:yellow;width:300px;" class="cont">блок-контент 2 (ширина задана,фикс)</div>
<div style="border:solid 1 red;background:orange;" class="cont">блок-контент 3</div>
<div style="clear:both"></div>


</div>



</body>
</html>

Edited December 17, 2010 by Stahanovec

airscape · December 17, 2010

выравниваются по центру, только вот средний блок не ограничивается 300px

Да, но кроме того и краевые блоки не растягиваются к своим краям, как хотелось бы.

Вообще складывается ощущение что блочная разметка пока ещё очень сыровата, и проще и быстрее таблицами делать. Как Вы думаете?

gorinich · December 17, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html profile="http://www.w3.org/2005/10/profile">
<head>
	<title>Untitled</title>
<style>
body{
margin:10px;
padding:0;
}
</style>
</head>

<body>

<div style="float:left;width:50%;margin-left:-150px;padding:1px 0;text-align:right;"><span style="border:solid 1px red;background:orange;">блок-контент 1</span></div>
<div style="border:solid 1px red;background:yellow;float:left;width:300px;text-align:center;">блок-контент 2 (ширина задана,фикс)</div>
<div style="padding:1px 0;text-align:left;"><span style="border:solid 1px red;background:orange;">блок-контент 3</span></div>

</body>
</html>

1. всегда нужно писать, в каком стандарте html вы верстаете (doctype). в разных стандартах разметка формируется по разному, разные браузеры разные стандарты по разному воспринимают

2. всегда в стилях следует писать, в каких единицах измерения вы указываете размеры/отступы (border:solid 1 red; - ошибка)

3. float включает обтекание объекта, он не говорит выстраиваться объекту в линию с обтекаемыми. в вашем случае два дива обтекаются третьим. третий див ничем не обтекается. поскольку вы ошибочно поставили обтекать и его, вам пришлось вставить совершенно ненужный див, отключающий обтекание.

4. блочная разметка действительно сыровата. но не в стандартах и браузерах, а пока что у вас. таблицами действительно проще и быстрей сверстать простую страницу с нуля. но вы попробуйте изменить страницу с табличной версткой и блочной. поменять местами объекты, изменить размер/позиционирование отдельного объекта в дизайне, создать что-то многослойное и динамичное. блочная верстка намного более гибкая, дающая намного больше возможностей верстальщику. пока вы не освоили всю ширину и возможности предоставленной свободы, действительно комфортней (проще, легче) находиться в более узких рамках. это имхо, абсолютно не в обиду. я сам этот мир только изучаю.

airscape · December 18, 2010

Цитата

1. всегда нужно писать, в каком стандарте html вы верстаете (doctype). в разных стандартах разметка формируется по разному, разные браузеры разные стандарты по разному воспринимают

Конечно я пишу стандарт. я для краткости так поместил.

Цитата

всегда в стилях следует писать, в каких единицах измерения вы указываете размеры/отступы (border:solid 1 red; - ошибка)

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

Цитата

float включает обтекание объекта, он не говорит выстраиваться объекту в линию с обтекаемыми. в вашем случае два дива обтекаются третьим. третий див ничем не обтекается. поскольку вы ошибочно поставили обтекать и его, вам пришлось вставить совершенно ненужный див, отключающий обтекание.

Ваш пример хорош. Но посмотрите как ie6 прочитает этот код. У последнего 3го блока не стоит float:left и он отделён от второго промежутком. Может быть и потому из-за этого бага в различных статьях чаще всего приводится пример в выставлением float:left для всех блоков,которые хотели бы разместить в ряд, а затем отмена обтекания.

Есть разные способы отмены обтекания. Я выбрал в данном случае такой способ.

Цитата

таблицами действительно проще и быстрей сверстать простую страницу

Вы себе не представляете какие сложные страницы можно верстать таблицами. И это делалось вполне нормально на протяжении последних 10 лет.

И в том и другом способе(блоками или таблицами) есть свои недостатки, конечно.

Вы использовали танцы с бубнами с указанием отрицательных маргинов, да ещё пришлось почесаться насколько именно там выставить их, в -150 (а может в -180?). Это не универсальный способ центрирования ряда блоков, потому что здесь есть какие-то конечные величины в маргинах и т.д.

Уж тогда проще expression воспользоваться чтобы всё нормально отцентрировать. Кроме того, крайние блоки не тянуться до краёв (блоки 1,3) как это предполагалось.

Насчёт многослойности. В каком смысле смотря многослойность, что под этим понимать. Наложение блочных элементов друг на друга? Да и таблицами можно, просто display выставить иначе и также дальше продолжать с z-index'ми и прочим танцевать.

Я читал в статьях что при вёрстке блоками, сложной, приходится извёртываться часто, использовать не по значению свойства. Overflow, margin и т.д.

Так что пока посмотрю ещё информацию чтобы разобраться сможет ли блочная вёрстка обеспечить центрирование, растяжки в нужном объёме. Пока нет решения даже той простой задачи выше, которая таблицами выполняется просто в мгновение ока.

psywalker · December 18, 2010

airscape

Ты уверен, что у твоей задачи нет решения на слоях? Скинь сюда свою аську, я опровергну твои выводы.

gorinich · December 18, 2010

отвечаю по пунктам:

1. из-за кратости не указав стандарт, вы получите ответ не в том стандарте, на котором пишете.

2. это работает годами в старых стандартах. посмотрите, что будет с таким объявлением величин в xhtml.

3. способ отмены обтекания вы выбрали красивый. однако, мы стараемся код минимализировать. ie6 не понимает xhtml. это единственный недостаток моего примера. хотите, напишу под старый стандарт.

4. я не использовал танцы с бубнами. так это выглядит для тех, кто не понимает сути происходящего. -150px (не -180 или чего еще) потому, что вы поставили в задаче фиксированный размер центрального блока в 300px. отсюда, смещение от центра левого блока на 150px влево, правого на 150px вправо. левому смещение необходимо задать явно. я думал, это понятно.

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

6. "Кроме того, крайние блоки не тянуться до краёв (блоки 1,3) как это предполагалось." это уж совсем интересно. именно что тянутся! тянутся в зависимости от своего наполнения аж до самих краев. если вы хотели сказать, что они должны иметь размер от центрального блока до самого края, то это более простая задача. уберите вложенные <span> и пишите текст крайних блоков прямо в их дивах. будет вам сразу размер крайних блоков до краев.

за свои более чем 10 лет верстки я неплохо себе представляю, что и как можно сверстать таблицами. к сведению, это начальный уровень верстки, мы все через это проходили. его наследие и не позволяет легко верстать блоками (мне в том числе, привычная логика - злая вещь). однако, я говорил не о статичной одноразовой верстке страницы (это в прошлом), а о динамичной, гибкой, управляемой. видимо, пока у вас нет такой необходимости. еще, мне кажется плохо, когда человек считает, что какие-то методы и свойства имеют свое конкретное предназначение, возможное использование их "не по назначению" это плохо. в этом случае, человек загоняет себя в некие отведенные рамки, о чем я говорил раньше. тогда, где найдется простор для полета фантазии? или фантазия - не для данной специализации? пользоваться нужно возможностями, а не предназначениями. тогда все получится легко и просто.

сорри, больше оффтопить не буду если спросите вариант под старые браузеры - напишу.

Edited December 18, 2010 by gorinich

psywalker · December 18, 2010

gorinich

Дружище, ты красиво говоришь, а можешь так же красиво предоставить нам решение задачи ТС, на слоях?

gorinich · December 18, 2010

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

psywalker · December 18, 2010

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

А ты не мог бы мне просто показать решение на слоях.

Задача:

Три колонки, средняя фикс, боковые тянуться от неё до краёв экрана.

sigma77 · December 18, 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" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.wrapper {
				position: relative;
				z-index: 1;
			}

			.left {
				width: 50%;
				float: left;
				background: green;
			}

			.left .inner_wrap {
				margin-right: 150px;
				padding: 20px;
			}

			.center {
				float: left;
				width: 300px;
				background: orange;
				margin-left: -150px;
				position: relative;
			}

			.center .inner_wrap {
				padding: 20px;
			}

			.right {
				width: 50%;
				float: right;
				background: silver;
				margin-left: -151px;
			}

			.right .inner_wrap {
				margin-left: 150px;
				padding: 20px;
			}

		</style>		
	</head>
	<body>
		<div class="wrapper">
			<div class="left">
				<div class="inner_wrap">
					<p>Lorem ipsum dolor sit amet consectetuer tortor congue elit adipiscing ornare. Vestibulum eros Curabitur fermentum convallis tempor eget tortor nulla et Nullam. Vitae egestas a arcu lacus nec et tellus metus lacus nulla. Non Nulla facilisis Sed massa Nulla Phasellus lacus semper est aliquet. Vel.</p>
					<p>Vestibulum et rutrum eu Praesent at dui nulla laoreet ac convallis. Elit ridiculus est Nullam ac orci condimentum ac Aenean Proin sem. At leo Vivamus Pellentesque tempor ut aliquet Maecenas venenatis nisl felis. Vitae leo dui sagittis nibh habitant pede condimentum pede eget ligula. Sagittis auctor Sed wisi nibh Proin suscipit.</p>
					<p>In quis orci Nulla adipiscing nisl vel lorem pretium non Cras. Ut elit ac semper et elit montes pellentesque Lorem semper justo. Augue nisl mattis penatibus est ante consequat pellentesque sed eget hendrerit. </p>
					<p>Quis Phasellus nunc quis enim in porttitor vel tempor ipsum ultrices. Eu urna convallis pretium nec odio pellentesque auctor gravida vitae sit. Auctor.</p>
					<p>Elit congue Curabitur senectus sed nunc tellus Nulla habitasse justo turpis. Magna tincidunt Quisque leo pellentesque sem mattis morbi odio enim Nam. Netus sem ut urna consectetuer Duis Praesent vitae vel In pede. Pellentesque malesuada dignissim ac dolor sapien non vitae eget vitae vitae. Molestie lorem.</p>
					<p>Ut tincidunt consectetuer et ac lobortis urna nec Phasellus Mauris dui. Mauris suscipit wisi nisl id tellus at gravida montes tempus nonummy. Curabitur ut Proin ante nunc Aliquam at nibh condimentum convallis ante. Convallis ut justo ut magna Aliquam nec ligula pellentesque ut auctor. Nullam tortor Lorem a nunc porttitor et a in at egestas. In.</p>
					<p>Lacus Vestibulum tellus orci eget vel sit platea nunc Nunc Vestibulum. Euismod orci natoque auctor ac tristique accumsan egestas Vestibulum eu.</p>
					<p>Integer a tellus quis sed tellus quis quis dapibus pellentesque sapien. Feugiat volutpat odio ut justo non Aenean eros et mi facilisis. Vitae Vestibulum urna semper wisi wisi vel Phasellus interdum dapibus cursus. Felis mattis quis vel morbi et orci et at dis Maecenas. Nullam mattis Vestibulum id at aliquam a vel leo quis justo. Urna.</p>
					<p>Elit et In condimentum pretium Sed a est Nullam est Sed. Lacus fringilla Nam orci leo nulla orci Morbi et neque condimentum. Elit orci cursus adipiscing vitae Nulla eu tellus purus elit Nam. Dolor semper orci Nam feugiat.</p>
					<p>At Mauris nibh mauris velit a cursus Fusce Phasellus venenatis porttitor. Condimentum nulla nibh volutpat nibh lorem feugiat Vivamus molestie dolor felis. Lobortis augue condimentum wisi felis sapien interdum est nascetur elit eget. Ac turpis Cum et justo semper Maecenas semper sociis Nulla lacinia. Eleifend netus semper semper nonummy tincidunt Phasellus iaculis.</p>
				</div>
			</div>
			<div class="center">
				<div class="inner_wrap">
					<p>Lorem ipsum dolor sit amet consectetuer magna Sed et orci cursus. Velit Vestibulum quis ligula laoreet lacinia Curabitur id condimentum justo sagittis. Ut ut nascetur et urna purus nibh tincidunt et eu pellentesque. Nec at adipiscing nascetur sodales.</p>
					<p>At augue volutpat nulla laoreet eu enim dui quis Morbi tristique. Curabitur tellus Curabitur convallis Suspendisse orci risus In mauris massa mauris. Libero neque Proin justo malesuada pretium Vestibulum condimentum ac adipiscing leo. Phasellus tempus pretium morbi sit tempus cursus tincidunt elit In justo. Sed ornare.</p>
					<p>Augue Nunc Sed Pellentesque ac Vivamus augue tempus In libero velit. Id a sagittis nibh parturient fringilla wisi sapien lorem Pellentesque Pellentesque. Nec tortor in vel risus ridiculus lorem Ut vitae felis laoreet. Convallis massa auctor ligula libero risus interdum In non dictumst Lorem. Sit id libero Aenean nibh amet Curabitur lacinia malesuada orci non. Ligula id.</p>
					<p>Urna adipiscing nibh ut risus felis leo Sed ante In at. Ac Nullam volutpat dignissim elit molestie Integer fames sapien fames nunc. Netus dictum ante egestas porttitor et tincidunt nulla Curabitur laoreet porttitor. </p>
					<p>Tincidunt porttitor Proin gravida Curabitur Nulla adipiscing Maecenas cursus tellus Lorem. Vestibulum nascetur id consectetuer est libero molestie et pede tortor dictumst. Quam ante fames tincidunt felis Curabitur nibh et arcu nibh nisl. Non tortor gravida neque nonummy penatibus elit Vivamus sociis parturient mollis. Nibh tellus id Duis eu Vivamus mauris condimentum quis orci.</p>
					<p>Maecenas suscipit adipiscing enim Vestibulum montes amet augue pellentesque hendrerit mauris. Turpis vitae pellentesque Proin elit libero nonummy Sed ipsum sed sapien. Laoreet Ut ut vel turpis et ac malesuada amet euismod vitae. Semper Nullam lorem Vestibulum Ut mattis ut porta sapien et auctor. Nullam libero ut et Lorem Nulla penatibus amet habitasse convallis.</p>
				</div>
			</div>
			<div class="right">
				<div class="inner_wrap">
					<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur Proin condimentum congue. Ipsum tortor congue lacinia ante sollicitudin hac urna tellus dignissim ligula. Consectetuer sapien ut Ut amet dictumst Phasellus ac sed montes Vestibulum. Sapien Nullam lobortis nisl Donec magnis quis sed quis libero id. Vestibulum sem semper ac condimentum.</p>
					<p>Elit semper quam consequat Vestibulum purus nunc hendrerit tellus nibh risus. Eget justo penatibus consequat Mauris Vestibulum turpis quam nibh vestibulum semper. Vel vitae orci pede eget id convallis pretium vel urna risus. Dignissim porta nunc Nulla natoque Sed leo et sem porttitor laoreet. Malesuada tortor ac auctor lacinia mus ut urna neque fermentum facilisi. </p>
					<p>Donec Aenean Nunc platea Vestibulum faucibus auctor nisl justo vel pulvinar. Ut malesuada Lorem et mauris elit Curabitur sem tellus Cras consequat. Non.</p>
					<p>Sodales egestas Morbi laoreet nunc amet lacinia tellus lorem elit ligula. Accumsan fames Curabitur lacus Curabitur id eros sed laoreet nisl a. Orci nisl id auctor magnis ac mauris.</p>
					<p>Congue quis ut ridiculus et ante at eros faucibus tempus urna. Elit a nibh feugiat convallis eu mauris adipiscing Curabitur laoreet in. Id massa Pellentesque Phasellus Curabitur morbi Aenean lorem.</p>
					<p>Urna elit commodo quis diam Integer tempus Pellentesque Vivamus urna Nulla. Fames nibh montes id nulla tortor Nunc Curabitur elit tincidunt semper. Nunc dui vitae vestibulum ut est enim vel Morbi enim lacinia. Dignissim dictumst tristique ligula et justo dis ac Vivamus.</p>
					<p>Consequat dui at purus Phasellus Phasellus adipiscing facilisi quis nec urna. Parturient laoreet felis nunc purus pede Donec Nam eget elit et. Nibh dui commodo orci sem libero hac Vivamus eros Nam Sed. Eu turpis tincidunt ipsum hac Nam et magnis semper eu mauris. Nisl Suspendisse congue at eros vitae.</p>
					<p>Morbi amet In dictumst Quisque est vestibulum pede quis nibh urna. Nec nunc pede euismod amet Aenean sociis est risus a eu. Justo magnis turpis rhoncus a Cras tincidunt Curabitur convallis Nulla.</p>
					<p>Orci lobortis ullamcorper pellentesque eget dui et Curabitur Curabitur tincidunt turpis. Facilisi ridiculus Nam Vestibulum urna leo id egestas Sed Nunc cursus. Dis felis Phasellus mauris dui condimentum senectus tincidunt.</p>
					<p>Cursus lorem et mollis Quisque Donec mi Ut vel orci ridiculus. Dui Praesent Fusce lorem fringilla nibh est sodales Sed venenatis Vivamus. Consequat condimentum Aenean vel adipiscing et tellus hendrerit interdum ut Sed. Elit accumsan id justo Cum consectetuer lobortis lorem et metus Phasellus. Ut malesuada laoreet nibh ligula neque tellus pretium Curabitur dignissim.</p>
				</div>
			</div>
		</div>
	</body>
</html>

airscape · December 18, 2010

Цитата

из-за краткости не указав стандарт, вы получите ответ не в том стандарте, на котором пишете.

Обычно вот такая вот супердисциплина показная, или я не знаю что это ещё, как раз и мешает фантазии и творчеству. Я сказал что суть вопроса то понятна, разве речь шла о xhtml? я вообще мог привести код и без тега body. Мне кажется что за слово "стандарт" вы готовы просто... порвать. Знаете, на заборе тоже написано, или на красивом стенде. А на деле, в жизни всё иначе. Зачем придавать наукообразие поверх нужного?

Цитата

это работает годами в старых стандартах. посмотрите, что будет с таким объявлением величин в xhtml.

Да пофик что с ними будет в xhtml или xxxhtml. Речь идёт о примере в пределах основного смысла кода,поставленного вопроса, а не о бордерах и их поведении в xhtml речь вообще.

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

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

Вообще не хочу обсуждать тему о том чем лучше верстать, об этом в инете достаточно информации. Я бы хотел сосредоточиться на данной проблеме.

gorinich · December 18, 2010

допустим, вот такой вариант:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled</title>

body{margin:3px;padding:0;}

.d1{float:left;margin-left:-154px;width:50%;}

.d1 div{margin-left:154px;background:orange;}

.d2{margin:0 auto;width:300px;background:yellow;}

.d3{float:right;margin-right:-153px;width:50%;}

.d3 div{margin-right:153px;background:orange;}

</style>

</head>

<body>

<div class="d1"><div>блок-контент 1</div></div>

<div class="d3"><div>блок-контент 3</div></div>

<div class="d2">блок-контент 2 (ширина задана,фикс)</div>

</body>

</html>

проверено во всех браузерах, включая ie6.

to airscape: очень странные слова. абсолютное непонимание темы я наблюдаю. указание стандарта - это инфа от вас, на каком вообще языке вы ответ хотите получить. вы же спрашивали не в принципе, как сейчас пишете, вам нужен был конкретный работающий код. если вам нужен был ответ на заборе, то сказали бы хотя бы это.

Edited December 18, 2010 by gorinich

airscape · December 18, 2010

Цитата(psywalker @ 18.12.2010, 17:23) <{POST_SNAPBACK}>

airscape

Ты уверен, что у твоей задачи нет решения на слоях? Скинь сюда свою аську, я опровергну твои выводы.

Вот аська. Жду в гости

psywalker · December 18, 2010

sigma77

psywalker
А можно мне?

Тебе всегда можно. Молодец. Отличное решение.

gorinich

Тоже неплохо.

Вот аська. Жду в гости

А нужна ли она мне, после того, как решение предоставили чуть выше?

sigma77 · December 18, 2010

Цитата(psywalker @ 18.12.2010, 19:08)

sigma77

Тебе всегда можно. Молодец. Отличное решение.

Ну решение не совсем моё...

psywalker · December 18, 2010

Ну решение не совсем моё...

Главное, что уловила суть и поняла, в чём фишка

airscape · December 18, 2010

Цитата(psywalker @ 18.12.2010, 19:14) <{POST_SNAPBACK}>

Главное, что уловила суть и поняла, в чём фишка

Замечательно. Есть 2 кода.

Сначала я разбиру пример Горыныча с маргинным подшаманом

Напишу позже

Цитата(gorinich @ 18.12.2010, 19:04) <{POST_SNAPBACK}>

если вам нужен был ответ на заборе, то сказали бы хотя бы это.

да, действительно, я бы сказал. Но как видите не сказал, а значит нужно было не это

gorinich · December 18, 2010

to sigma77: в ie6 среднего блока нет

airscape · December 18, 2010

to sigma77: в ie6 среднего блока нет

и не только в ie6

psywalker · December 18, 2010

Да, sigma77 немного промахнулась. Переделал её решение немного.

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.wrapper {
position: relative;
z-index: 1;
}

.left {
width: 50%;
float: left;
background: green;
margin-right: -153px;
}

.left .inner_wrap {
margin-right: 150px;

}

.center {
float: left;
width: 300px;
background: orange;

position: relative;
}

.center .inner_wrap {

}

.right {
width: 50%;
margin-right: -1px;
float: right;
background: silver;
margin-left: -153px;
}

.right .inner_wrap {
margin-left: 150px;

}

</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<div class="inner_wrap">
<p>Lorem ipsum dolor sit amet consectetuer tortor congue elit adipiscing ornare. Vestibulum eros Curabitur fermentum convallis tempor eget tortor nulla et Nullam. Vitae egestas a arcu lacus nec et tellus metus lacus nulla. Non Nulla facilisis Sed massa Nulla Phasellus lacus semper est aliquet. Vel.</p>
<p>Vestibulum et rutrum eu Praesent at dui nulla laoreet ac convallis. Elit ridiculus est Nullam ac orci condimentum ac Aenean Proin sem. At leo Vivamus Pellentesque tempor ut aliquet Maecenas venenatis nisl felis. Vitae leo dui sagittis nibh habitant pede condimentum pede eget ligula. Sagittis auctor Sed wisi nibh Proin suscipit.</p>
<p>In quis orci Nulla adipiscing nisl vel lorem pretium non Cras. Ut elit ac semper et elit montes pellentesque Lorem semper justo. Augue nisl mattis penatibus est ante consequat pellentesque sed eget hendrerit. </p>
<p>Quis Phasellus nunc quis enim in porttitor vel tempor ipsum ultrices. Eu urna convallis pretium nec odio pellentesque auctor gravida vitae sit. Auctor.</p>
<p>Elit congue Curabitur senectus sed nunc tellus Nulla habitasse justo turpis. Magna tincidunt Quisque leo pellentesque sem mattis morbi odio enim Nam. Netus sem ut urna consectetuer Duis Praesent vitae vel In pede. Pellentesque malesuada dignissim ac dolor sapien non vitae eget vitae vitae. Molestie lorem.</p>
<p>Ut tincidunt consectetuer et ac lobortis urna nec Phasellus Mauris dui. Mauris suscipit wisi nisl id tellus at gravida montes tempus nonummy. Curabitur ut Proin ante nunc Aliquam at nibh condimentum convallis ante. Convallis ut justo ut magna Aliquam nec ligula pellentesque ut auctor. Nullam tortor Lorem a nunc porttitor et a in at egestas. In.</p>
<p>Lacus Vestibulum tellus orci eget vel sit platea nunc Nunc Vestibulum. Euismod orci natoque auctor ac tristique accumsan egestas Vestibulum eu.</p>
<p>Integer a tellus quis sed tellus quis quis dapibus pellentesque sapien. Feugiat volutpat odio ut justo non Aenean eros et mi facilisis. Vitae Vestibulum urna semper wisi wisi vel Phasellus interdum dapibus cursus. Felis mattis quis vel morbi et orci et at dis Maecenas. Nullam mattis Vestibulum id at aliquam a vel leo quis justo. Urna.</p>
<p>Elit et In condimentum pretium Sed a est Nullam est Sed. Lacus fringilla Nam orci leo nulla orci Morbi et neque condimentum. Elit orci cursus adipiscing vitae Nulla eu tellus purus elit Nam. Dolor semper orci Nam feugiat.</p>
<p>At Mauris nibh mauris velit a cursus Fusce Phasellus venenatis porttitor. Condimentum nulla nibh volutpat nibh lorem feugiat Vivamus molestie dolor felis. Lobortis augue condimentum wisi felis sapien interdum est nascetur elit eget. Ac turpis Cum et justo semper Maecenas semper sociis Nulla lacinia. Eleifend netus semper semper nonummy tincidunt Phasellus iaculis.</p>
</div>
</div>

<div class="right">
<div class="inner_wrap">
<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur Proin condimentum congue. Ipsum tortor congue lacinia ante sollicitudin hac urna tellus dignissim ligula. Consectetuer sapien ut Ut amet dictumst Phasellus ac sed montes Vestibulum. Sapien Nullam lobortis nisl Donec magnis quis sed quis libero id. Vestibulum sem semper ac condimentum.</p>
<p>Elit semper quam consequat Vestibulum purus nunc hendrerit tellus nibh risus. Eget justo penatibus consequat Mauris Vestibulum turpis quam nibh vestibulum semper. Vel vitae orci pede eget id convallis pretium vel urna risus. Dignissim porta nunc Nulla natoque Sed leo et sem porttitor laoreet. Malesuada tortor ac auctor lacinia mus ut urna neque fermentum facilisi. </p>
<p>Donec Aenean Nunc platea Vestibulum faucibus auctor nisl justo vel pulvinar. Ut malesuada Lorem et mauris elit Curabitur sem tellus Cras consequat. Non.</p>
<p>Sodales egestas Morbi laoreet nunc amet lacinia tellus lorem elit ligula. Accumsan fames Curabitur lacus Curabitur id eros sed laoreet nisl a. Orci nisl id auctor magnis ac mauris.</p>
<p>Congue quis ut ridiculus et ante at eros faucibus tempus urna. Elit a nibh feugiat convallis eu mauris adipiscing Curabitur laoreet in. Id massa Pellentesque Phasellus Curabitur morbi Aenean lorem.</p>
<p>Urna elit commodo quis diam Integer tempus Pellentesque Vivamus urna Nulla. Fames nibh montes id nulla tortor Nunc Curabitur elit tincidunt semper. Nunc dui vitae vestibulum ut est enim vel Morbi enim lacinia. Dignissim dictumst tristique ligula et justo dis ac Vivamus.</p>
<p>Consequat dui at purus Phasellus Phasellus adipiscing facilisi quis nec urna. Parturient laoreet felis nunc purus pede Donec Nam eget elit et. Nibh dui commodo orci sem libero hac Vivamus eros Nam Sed. Eu turpis tincidunt ipsum hac Nam et magnis semper eu mauris. Nisl Suspendisse congue at eros vitae.</p>
<p>Morbi amet In dictumst Quisque est vestibulum pede quis nibh urna. Nec nunc pede euismod amet Aenean sociis est risus a eu. Justo magnis turpis rhoncus a Cras tincidunt Curabitur convallis Nulla.</p>
<p>Orci lobortis ullamcorper pellentesque eget dui et Curabitur Curabitur tincidunt turpis. Facilisi ridiculus Nam Vestibulum urna leo id egestas Sed Nunc cursus. Dis felis Phasellus mauris dui condimentum senectus tincidunt.</p>
<p>Cursus lorem et mollis Quisque Donec mi Ut vel orci ridiculus. Dui Praesent Fusce lorem fringilla nibh est sodales Sed venenatis Vivamus. Consequat condimentum Aenean vel adipiscing et tellus hendrerit interdum ut Sed. Elit accumsan id justo Cum consectetuer lobortis lorem et metus Phasellus. Ut malesuada laoreet nibh ligula neque tellus pretium Curabitur dignissim.</p>
</div>
</div>
<div class="center">
<div class="inner_wrap">
<p>Lorem ipsum dolor sit amet consectetuer magna Sed et orci cursus. Velit Vestibulum quis ligula laoreet lacinia Curabitur id condimentum justo sagittis. Ut ut nascetur et urna purus nibh tincidunt et eu pellentesque. Nec at adipiscing nascetur sodales.</p>
<p>At augue volutpat nulla laoreet eu enim dui quis Morbi tristique. Curabitur tellus Curabitur convallis Suspendisse orci risus In mauris massa mauris. Libero neque Proin justo malesuada pretium Vestibulum condimentum ac adipiscing leo. Phasellus tempus pretium morbi sit tempus cursus tincidunt elit In justo. Sed ornare.</p>
<p>Augue Nunc Sed Pellentesque ac Vivamus augue tempus In libero velit. Id a sagittis nibh parturient fringilla wisi sapien lorem Pellentesque Pellentesque. Nec tortor in vel risus ridiculus lorem Ut vitae felis laoreet. Convallis massa auctor ligula libero risus interdum In non dictumst Lorem. Sit id libero Aenean nibh amet Curabitur lacinia malesuada orci non. Ligula id.</p>
<p>Urna adipiscing nibh ut risus felis leo Sed ante In at. Ac Nullam volutpat dignissim elit molestie Integer fames sapien fames nunc. Netus dictum ante egestas porttitor et tincidunt nulla Curabitur laoreet porttitor. </p>
<p>Tincidunt porttitor Proin gravida Curabitur Nulla adipiscing Maecenas cursus tellus Lorem. Vestibulum nascetur id consectetuer est libero molestie et pede tortor dictumst. Quam ante fames tincidunt felis Curabitur nibh et arcu nibh nisl. Non tortor gravida neque nonummy penatibus elit Vivamus sociis parturient mollis. Nibh tellus id Duis eu Vivamus mauris condimentum quis orci.</p>
<p>Maecenas suscipit adipiscing enim Vestibulum montes amet augue pellentesque hendrerit mauris. Turpis vitae pellentesque Proin elit libero nonummy Sed ipsum sed sapien. Laoreet Ut ut vel turpis et ac malesuada amet euismod vitae. Semper Nullam lorem Vestibulum Ut mattis ut porta sapien et auctor. Nullam libero ut et Lorem Nulla penatibus amet habitasse convallis.</p>
</div>
</div>
</div>
</body>
</html>

airscape · December 18, 2010

Спасибо за Ваши примеры!

Горыныч, в Вашем примере всё бы хорошо, но шармана.... Если разложить алгоритм, а он почти аналогичен примеру Сигмы, то получается что:

Мы прифлотили блок 1 к левому краю, а блок 3 к правому.Затем мы начинаем подшаманивать с отрицательными значениями маргинов так чтобы освободилась часть по центру для блока 2 известной ширины. Границы блока 2 всё равно чётко не сходятся, остаются пробелы. Ну это ладно ещё...

Получается в итоге,что мы по-любому должны указать ширину плавающего блока, в данном случае 50%, а потом начинаем его двигать куда подальше чтобы не мешал центральному, маргинами или пр..Это конечно способ, но сами понимаете, кустарный. Нельзя ли как-то так сделать, чтобы плавающий блок сам вычислял сколько ему нужно до соседнего и растягивался до него средствами CSS? Наверное,так ничего не выйдет, потому что у плавающего блока должна быть задана ширина.Получается, что мы вынуждены подшаманивать ширинами, маргинами.

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

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

Edited December 18, 2010 by airscape

psywalker · December 18, 2010

airscape

А я не пойму, чем этот способ тебя не устроил?

airscape · December 18, 2010

airscape
А я не пойму, чем этот способ тебя не устроил?

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

Во-вторых, остаются белые пробелы между блоками

gorinich · December 18, 2010

во-первых: весь код пишется вручную. ширина 300px выставляется вручную. маргины не подбираются, как вы пишете, а четко считаются: [фиксированная ширина среднего блока]/2. в наших примерах еще плюс стабильные 3 вправо 4 влево пикселя на совместимость с ie6 не зависимо от ширины среднего блока.

во-вторых: это еще как-то можно за минус засчитать. но неужели у вас объекты в дивах будут без отступов от краев?

ок, накидал еще вариант. абсолютно без отступов где бы то ни было:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body{margin:0;padding:0;}
.d1{position:absolute;left:0;width:50%;}
.d1 div{margin-right:150px;background:orange;}
.d2{margin:0 auto;width:300px;background:yellow;}
.d3{position:absolute;right:0;width:50%;}
.d3 div{margin-left:150px;background:orange;}
</style>
</head>
<body>
<div class="d1"><div>блок-контент 1</div></div>
<div class="d3"><div>блок-контент 3</div></div>
<div class="d2">блок-контент 2 (ширина задана,фикс)</div>
</body>
</html>

также проверено во всех браузерах, включая ie6. надеюсь, тоже чем-нибудь не понравится...

psywalker · December 18, 2010

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

Sign In

Варавнивание нескольких плавающих блоков с растяжкой

Question

Link to comment

Share on other sites

28 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

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

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