Jump to content
  • 0

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

airscape

Asked by airscape,

 Share

Question

airscape Explorer

airscape

Posted
Posted

Привет!

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

<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 блока в другой контейнер, а потом выравнять его относительно родительского - также не получилось.

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

Спасибо

Link to comment
Share on other sites

28 answers to this question

Recommended Posts

  • 0
gorinich Explorer

gorinich

Posted
Posted (edited)

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

Edited by gorinich
Link to comment
Share on other sites
  • 0
airscape Explorer

airscape

Posted
  • Author
Posted
... надеюсь, тоже чем-нибудь не понравится...
Ну прям как Змей Горыныч настоящий.Хоть немножко, но поджарить, да?Так, пыхнуть немножко все же надо... :)

Насчёт варианта - хороший вариант.

А что боковые колонки? заключить 3 дива в другой див, уж из него то эти 2 абсолютно спозиционированных точно не выпадут. И продолжать верстать ниже.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept