Как добиться этого гибкого макета CSS?

-4

Вот код, который я написал. Макет должен быть отзывчивым.Как добиться этого гибкого макета CSS?

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
     <style type="text/css"> 
      .box { 
       border: 1px solid black; 
       } 
     </style> 
</head> 
<body> 
    <div style="height: 600px;"> 
    <div class="box" style="width: 30%; height: 70%; float: left"></div> 
    <div class="box" style="width: 69%; height: 20%; float: left;"></div> 
    <div class="box" style="width: 15%; height: 50%; float: left;"></div> 
    <div class="box" style="width: 54%; height: 10%; float: left;"></div> 
    <div class="box" style="width: 54%; height: 70%; float: left;"></div> 
    <div class="box" style="width: 45%; height: 30%; float: left;"></div> 
</div> 
</body> 
</html>

Изображение:

источник

2013-11-18 Ashish Charan

' сделать 70% – Ani

Дно 30 х 45 блок идет бело ш. Пик - это то, чего я хочу достичь. –

Это не работает. –

Вы можете использовать абсолютное позиционирование:

<div style="height: 600px; position: relative;"> 
    <div class="box" style="width: 30%; height: 70%; top: 0%; left: 0%;">1</div> 
    <div class="box" style="width: 70%; height: 20%; top: 0%; left: 30%;">2</div> 
    <div class="box" style="width: 15%; height: 50%; top: 20%; left: 30%;">3</div> 
    <div class="box" style="width: 55%; height: 10%; top: 20%; left: 45%;">4</div> 
    <div class="box" style="width: 55%; height: 70%; top: 30%; left: 45%;">5</div> 
    <div class="box" style="width: 45%; height: 30%; top: 70%; left: 0%;">6</div> 
</div> 

.box { 
    border: 1px solid black; 
    position: absolute; 
}

Fiddle: http://jsfiddle.net/hn5s6/

источник

2013-11-18 17:15:51 Krzysztof

Спасибо. Оно работает. :) –

Как добиться этого гибкого макета CSS?

ответ

Смежные вопросы