Выравнивание слоёв.

Flake · July 29, 2009

Здравствуйте. Есть код:

// CSS
.div1{
	float: left;
	width: 20px;
}

<div class="div1">layer 1</div>

<div>layer 2</div>

В этом случае layer 1 будет иметь ширину в 20 пикселей, а layer 2 будет идти за ним в одну строку и растянут на всю страницу.

Собственно вопрос, а как сделать на оборот? Чтобы layer 1 был растянут на всё страницу, а layer 2 был в правом краю и имел ширину в 20 пикселей.

rus · July 29, 2009

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

<html>
<head>
<style>
.div1{
	float: left;
	width: 90%;
	background-color:#cccccc;
}
.div2 {
	float: left;
	width: 10%;
	background-color:#cc310a;
}
</style>
</head>
<body>
<div class="div1">layer 1</div>
<div class="div2">layer 2</div>
</body>
</html>

Flake · July 29, 2009

Спасибо, но с процентами не очень удачно, нужна именно фиксированная ширина правого дива.

Great Rash · July 29, 2009

/* CSS */
.div1 {
	margin-right: 20px;
	background: #ccc;
}

.div2 {
	float: right;
	width: 20px;
	background: #cc310a;
}

<!-- HTML -->
<div class="div2">layer 2</div>
<div class="div1">layer 1</div>

yopopt · July 30, 2009

Используя код rus можно сделать вот так:

<html>
<head>
<style>
body {
	position: relative;
}
.div1 {
	margin-right: 20px;
	background: #ccc;
}

.div2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	background: #cc310a;
}
</style>
</head>
<body>
<div class="div1">layer 1</div>
<div class="div2">layer 2</div>
</body>
</html>

Great Rash · July 30, 2009

Абсолютное позиционирование не всегда хорошо.

yopopt · July 30, 2009

Абсолютное позиционирование не всегда хорошо.

Приведите пример, когда не хорошо.

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

rus · July 31, 2009

Приведите пример, когда не хорошо.

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

psywalker · July 31, 2009

Вариант Great Rash без сомнения самый лучший в данном случае, да и не только, а если ещё за единицы измерения взять ЕМ, а не Пикселы, тогда этот способ подходит на все случаи жизни, ИМХО. Насчёт position: absolute; скажу так: Это мощное оружие надо использовать с умом и не использовать там, где вполне можно обойтись темже float: right; или ещё чем-то, что никак не разрушит вёрстку при любых раскладах, как раз наш случай сюда подходит!

yopopt · July 31, 2009

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

rash · July 31, 2009

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

psywalker · July 31, 2009

1) Всё таки считаю, что Позиционирование в данном случае неуместно 100%

2)

А с float напрягает неприятный трёхпиксельный баг ие.

Ерунда, если вдруг он возникнет, то вылечить его три секунды, а потом опять-же делать надо с умом, а не клепать где и как попало

yopopt · July 31, 2009

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

Согласен, в таких случаях это не применимо.

Sign In

Выравнивание слоёв.

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information