Question

请帮我创建如下图所示的布局。

我试图实现它，但我对CSS的了解还不够，布局必须尽快完成...我尝试使用CSS属性，如float，overflow，position：absolute，relative等，但结果令人失望 - div互相溢出，不能正确定位等等。每个div包含很多内容 - 其他div，图像，列表等。

期望的结果：

Answer 1

<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>

Answer 2

  <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%;
 }

如何按指定布局div？

2 个答案: