Макет с относительным расположением - PullRequest
Новая
       34

Макет с относительным расположением

1 голос
/ 02 августа 2011

Я хочу сделать этот макет:

http://i.stack.imgur.com/uhgMg.jpg

#container
{
width:600px;
background:blue;
margin:0 auto;
}

.box
{
float:left;
width:196px;
height:318px;
background:red;
}

#box1
{
position:relative;
left:-140px;
float:left;
}

#box2
{
position:relative;
left:-102px;
}

#box3
{
position:relative;
left:-66px;
}

#box4 //this div is doing the mess because it's default position is under the other 3 divs and that's why the container stretches.
{
position:relative;
left:558px;
top:-318px;
}

<div id="container">

<div>RANDOM CONTENT</div>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>

<div style="clear:both"></div>
</div>

В некотором контейнере есть 4 относительных элемента div рядом друг с другом.

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

Как это сделать?

Ответы [ 2 ]

1 голос
/ 02 августа 2011

Создание элементов div, ширина которых не превышает ширину содержащего их элемента. В этом примере ваш содержащий div имеет ширину 600 пикселей, но у вас есть элементы на 784 пикселя, которые вы пытаетесь ввести в float. Если вы измените их на 148px вместо 198px, вы должны быть хороши.

Хотя - я не уверен, почему вы используете float И относительное позиционирование. Относительное позиционирование позиционирует что-то относительно того места, где это обычно происходит в документе ... Я бы, вероятно, просто придерживался float:left; - не должно быть необходимости в относительном позиционировании.

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

0 голосов
/ 02 августа 2011

почему бы не разделить на 3 раздела 

<div id="container">

<div class="cont">RANDOM CONTENT</div>
<div class="banner">
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
</div>
<div style="clear:both"></div>
<div class="cont">RANDOM CONTENT</div>
</div>

и css 

.banner {
    height: 318px;
    width: 800px;
    position: relative;
}
.cont {
width:600px;
background:blue;
margin:0 auto;
}
...