使用浮动和清除属性创建您选择的流体块布局。 使用 margin 属性将元素定位在黄色块内。 按照图中的比例设置大小,但要记住,这个构图代表的是网页布局的布局,所以块之间不能重叠; 当屏幕宽度小于640px时,允许水平滚动条;
时间: 2024-05-09 21:18:35 浏览: 20
HTML代码:
```html
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="block5"></div>
<div class="clear"></div>
</div>
```
CSS代码:
```css
.container {
background-color: yellow;
overflow-x: auto;
}
.block1 {
float: left;
width: 20%;
height: 100px;
margin: 10px;
background-color: red;
}
.block2 {
float: left;
width: 20%;
height: 150px;
margin: 10px;
background-color: green;
}
.block3 {
float: left;
width: 40%;
height: 200px;
margin: 10px;
background-color: blue;
}
.block4 {
float: left;
width: 30%;
height: 150px;
margin: 10px;
background-color: orange;
}
.block5 {
float: left;
width: 30%;
height: 100px;
margin: 10px;
background-color: purple;
}
.clear {
clear: both;
}
```
说明:
- 容器使用黄色背景色,并设置了 `overflow-x: auto;`,表示当屏幕宽度小于内容宽度时显示水平滚动条。
- 每个块使用 `float: left;` 属性实现浮动布局。
- 每个块设置了宽度和高度,并使用 `margin` 属性将它们定位在黄色块内。
- 最后一个块后面使用一个空元素,设置 `clear: both;` 属性清除浮动,以防止父元素高度塌陷。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)