Как расположить div как указано?

Question

Как расположить div как указано?

0

Пожалуйста, помогите мне создать макет, как указано на изображении ниже.

Я пытался добиться этого, но моих знаний о CSS недостаточно, и макет должен быть выполнен как можно скорее... Я пытался играть с атрибутами CSS, такими как float, overflow, position: absolute, relative и т.д. Но результаты были разочаровывающими - переполнение divs друг с другом, не располагайте должным образом и так далее. Каждый div содержит много контента - другие div, изображения, списки и т.д.

Желаемый результат:

yaru 15 дек. 2013, в 15:47

Источник

Теги:

html

css

2 ответа

0

  <body>
  <div class="box">
    <div class="red">

    </div>

  <div class="green">

    </div>


  </div>
  <!-- -->
 <div class="box">
    <div class="blue">

    </div>

 </div>
 <!-- -->
 <div class="box">
   <div class="yellow">

    </div>
  </div>
 <!-- -->
 <div class="box">
    <div class="black">

    </div>
  </div>
  </body>




 .box{ 
 width:400px;
 clear:both;
 height:400px;
 margin-top:10px;
  }

.yellow{
background:yellow;
width:40%;
height:100%;
float:right;  
}

.black{
background:black;
 width:80%;
height:20%;
float:right;  
}

.blue{
background:blue;
width:20%;
height:100%;
float:right;
}

 .red{
background:red;
width:30%;
height:60%;
float:left;
}

.green{
background:green;
width:60%;
height:90%;
float:left;
margin-left:10%;
 }

iamkarsoft 15 дек. 2013, в 13:24

Ещё вопросы

Andrea Riva · Accepted Answer · 2013-12-15T12-16-00.000Z

<div style="float: left; width: 100px; height: 200px; background: #f00;">content...</div>
<div style="float: right; width: 200px; height: 300px; background: #0f0;">content...</div>

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

<div style="float: right; width: 100px; height: 300px; background: #00f;">content...</div>

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

<div style="float: right; width: 500px; height: 200px; background: #ff0;">content...</div>

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

<div style="width: 100%; height: 100px; background: #000;">content...</div>