在css中,左边一个大盒子,右边6个小盒子,排成两排怎么实现?如下图!
发布网友
发布时间：2022-05-14 05:23
共3个回答
懂视网
时间：2022-05-14 09:44
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unicorn Admin</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
.test{
width:100px;
height: 100px;
background-color: gray;
}
.test:after{
content: "";
display: block;
width: 100%;
height: 33.3%;
border-top: 1px solid white;
border-bottom: 1px solid white;
margin-top: -66.6%;
}
.test:before{
content: "";
display: block;
width: 33%;
height: 100%;
border-right: 2px solid white;
}
</style>
</head>
<body >
<p>
<p class="test">
</p>
</p>
</body>
</html>
-->
热心网友
时间：2022-05-14 06:52
<div style="width:150px; height:110px; background-color:#FFEBCD; float:left;"></div>
<div style="width:170px; height:110px; background-color:#FFEBCD; float:left; margin-left:10px; overflow:hidden;">
<div style="width:50px; height:50px; background-color:#F0FFFF; float:left; margin-right:10px;"></div>
<div style="width:50px; height:50px; background-color:#F0FFFF; float:left; margin-right:10px;"></div>
<div style="width:50px; height:50px; background-color:#F0FFFF; float:left;"></div>
<div style="width:50px; height:50px; background-color:#F0FFFF; float:left; margin: 10px 10px 0 0;"></div>
<div style="width:50px; height:50px; background-color:#F0FFFF; float:left; margin: 10px 10px 0 0;"></div>
<div style="width:50px; height:50px; background-color:#F0FFFF; float:left; margin-top:10px;"></div>
</div>
</div>
这是我根据你那张图片写的一个简单的布局例子，你可以运行参考看看。
热心网友
时间：2022-05-14 08:10
让这两个div左浮动。
