Борясь за выравнивание divs в CSS

Question

У меня есть следующий код, показанный в this fiddle.

Для моей жизни я не могу заставить их согласовать то, что я хочу. Это довольно легко увидеть, где каждый DIV должен быть глядя на код, но вот еще какая-то помощь:

| topLeft  | topRight  |   | 
----------------------------------| right | 
| bottomLeft | bottomRight |   | 

Пожалуйста, помогите мне с этим!

Answer 1

Пример 1. Перемещение правых положений перед левым: http://jsfiddle.net/pTDEX/1/

html:

<div class="top"> 
    <div class="topRight"> 
     topRight 
    </div> 
    <div class="topLeft"> 
     topLeft 
    </div> 
</div> 

Коробка, плавающая справа после того, как левая плавающая ячейка будет расположена под коробкой, а затем направо.

Или бывший 2. обменивая float: right для float:left: http://jsfiddle.net/pTDEX/3/

.topLeft { 
    background: green; 
    float: left; 
    width: 300px; 
    height: 80px; 
} 
.topRight { 
    background: gray; 
    float: left; 
    width: 100px; 
    height: 80px; 
} 

Это будет плавать правые коробки влево от левой коробки. Есть больше возможностей, но это все о понимании того, что делает float, поиграть с ним!

На боковой ноте вы можете безопасно свернуть display: inline при указании фиксированных блоков.

Answer 2

Я использовал абсолютное позиционирование на подэлементах и ​​относительное позиционировании на контейнере, это легко, если вы знаете размеры ваших элементов (в рх или%)

.container { 
background: cyan; 
margin: 0 auto; 
width: 500px; 
height: 100px; 
position:relative; 
} 
.top { 
background: purple; 
position:absolute; 
top:0; 
left:0; 
width: 400px; 
height: 80px; 
} 
.topLeft { 
background: green; 
display: inline; 
width: 300px; 
height: 80px; 
position:absolute; 
top:0; 
left:0; 
} 
.topRight { 
background: gray; 
display: inline; 
float: right; 
width: 100px; 
height: 80px; 
position:absolute; 
top:0; 
left:300px; 
} 
.bottom { 
background: black; 
display: inline; 
width: 400px; 
height: 20px; 
position:absolute; 
top:80px; 
left:0; 
} 
.BottomLeft { 
background: blue; 
display: inline; 
width: 300px; 
height: 20px; 
position:absolute; 
top:0; 
left:0; 
} 
.bottomRight { 
background: red; 
display: inline; 
width: 100px; 
height: 20px; 
position:absolute; 
top:0; 
right:0; 
} 
.right { 
background: yellow; 
display: inline; 
float: right; 
width: 100px; 
height: 100px; 
position:absolute; 
top:0; 
left:400px; 
} 

ЗАКАНЧИВАТЬ обновленную скрипку: http://jsfiddle.net/pTDEX/2/

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

Answer 3

Вы Основная проблема в вашем HTML коде, просто порядок сНу тега Right

<div class="container"> 
    <div class="right">right</div> <!-- replaced top with right --> 
            <!-- your mistake was fixed here --> 
    <div class="top'"> 
     <div class="topRight">topRight</div> 
     <div class="topLeft">topLeft</div> 
    </div> 

    <div class="bottom"> 
     <div class="bottomRight">bottomRight</div> 
     <div class="bottomLeft">BottomLeft</div> 
    </div> 
</div> 

Ваш стиль Css

//Css Style 
.container { 
    background: cyan; 
    margin: 0 auto; 
    width: 500px; 
    height: 100px; 
} 
.top { 
    background: purple; 
    float: left; 
    width: 400px; 
    height: 80px; 
} 
.topLeft { 
    background: green; 
    display: inline; 
    float: left; 
    width: 300px; 
    height: 80px; 
} 
.topRight { 
    background: gray; 
    display: inline; 
    float: right; 
    width: 100px; 
    height: 80px; 
} 
.bottom { 
    background: black; 
    display: inline; 
    float: left; 
    width: 400px; 
    height: 20px; 
} 
.BottomLeft { 
    background: blue; 
    display: inline; 
    float: left; 
    width: 300px; 
    height: 20px; 
} 
.bottomRight { 
    background: red; 
    display: inline; 
    float: right; 
    width: 100px; 
    height: 20px; 
} 
.right { 
    background: yellow; 
    display: inline; 
    float: right; 
    width: 100px; 
    height: 100px; 
}