Блог

Я не могу поверить, что не могу заставить это работать!

Это в основном тот взгляд, к которому я стремлюсь, но не могу получить его таким образом вообще!

  ------------------------------------------ 
|   Div 1                                  |
|              -------------               |
|             | Div 2       |              |
 -------------|             |-------------- 
 -------------|             |-------------- 
|  Div 3      |             |   Div 4      |
|              -------------               |
|               |         ----------------- 
|               | ------------------------- 
|               || Div 5                   |
|               ||                         |
|               ||                         |
 ---------------  ------------------------- 
 

Я попытался разместить divs в любом возможном порядке.

У меня есть контейнер для всей страницы, установленный как position: relative

 #div1 {
    width: 950px;
}
#div2 {
    position: absolute;
    height: 150px;
    width: 150px;
    margin: -100px auto 0 auto;
    left: 0;
    right: 0;
    z-index: 88;
 }
#div3 {
    float: left;
    width: 200px;
    z-index: 0;
}
#div4 {
    width: 400px;
    text-align: center;
    float: right;
    z-index: 0;
}
#div5 {
    width: 600px;
    float: right;
    clear: right;
    z-index: 0;
}
 

Я получил divs 1,2,3 и 4, чтобы работать нормально. Но когда я добавляю div 5, это все портит. Div 2 кажется проблемой, Div 5, похоже, хочет выровняться с этим.

Если бы вы могли, пожалуйста, помочь, это спасло бы меня от еще одной шишки на лбу!

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

Пожалуйста, смотрите прилагаемую скрипку. http://jsfiddle.net/4TCJ9 /

Используйте приведенный ниже код:

 <div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
<div id="align">    
 <div id="div3"></div>
 <div id="div4"></div>
 <div id="div5"></div>
</div>
</div>
 

CSS:

 #wrapper {
position:relative;
}

div {
border:1px solid black;
background: yellow;

}

#div1 {
width: 950px;
height:200px;
}
#div2 {
position: absolute;
height: 150px;
width: 150px;
left: 40%;
top: 100px;
z-index: 88;
  }
#align{
width:950px;
float:left;
position:relative;
height:auto;

}
#div3 {
float: left;
width: 200px;
z-index: 0;
height:400px;
}
#div4 {
width: 745px;
text-align: center;
float: left;
z-index: 0;
height:200px;
}
#div5 {
width: 745px;
float: left;
clear: right;
z-index: 1;
height:200px;
}
 

Изменение размеров зависит от ваших потребностей.