<div></div>
<div></div>
<div></div>
<div></div>div{
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
div:nth-of-type(2){
float: left;
}结果我本来是想让第二个、第三个<div>并列，水平拉开5px对齐。我有几个问题：1、为什么第二个<div>加了float:left后margin都没了？2、按理说第三个<div>应该是排在第二个<div>后面的，并且拉开5px的margin的，这个和第二个<div>的外边距没什么关系，为什么会和第二个重叠了？而且加了float属性后似乎上边距消失了，这是为什么？3、我想让第一个占一行，第四个占一行，第二、第三占一行，第二个和第三个并列应该怎么写css？
1 回答
已采纳
李晓健
TA贡献1036条经验 获得超461个赞
1: 第二个<div>加了float:left后margin是有的。
2：因为第二个设置了浮动，所以他会脱离文档流，就会盖在第三个的上面
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
margin: 5px;
}
div:nth-of-type(2),div:nth-of-type(3){
display: inline-block;
}
</style>
</head>
<body>
<div style="background-color: #00a854"></div>
<div style="background-color: red"></div>
<div style="background-color: blue"></div>
<div style="background-color: yellow"></div>
</body>
</html>
- 1 回答
- 1 关注
- 2747 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消