为什么div在不同情况下会偏移
这是我针对不同情况的代码。Demo1:为什么红框和蓝框不在同一水平面上？
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
}
#div1 {
display: inline-block;
background-color: red;
width: 50px;
height: 50px;
}
#div2 {
display: inline-block;
background-color: blue;
width: 50px;
height: 50px;
}
#div2-child {
width: 20px;
height: 20px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1">x</div>
<div id="div2">
<div id="div2-child"></div>
</div>
</body>
Demo2：在Demo1的基础上，我把x去掉了，为什么底部是蓝色的框。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
}
#div1 {
display: inline-block;
background-color: red;
width: 50px;
height: 50px;
}
#div2 {
display: inline-block;
background-color: blue;
width: 50px;
height: 50px;
}
#div2-child {
width: 20px;
height: 20px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<div id="div2-child"></div>
</div>
</body>
Demo3:为什么添加x后，每个div1和div-child都在同一行。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
}
#div1 {
display: inline-block;
background-color: red;
width: 50px;
height: 50px;
}
#div2 {
display: inline-block;
background-color: blue;
width: 50px;
height: 50px;
}
#div2-child {
width: 20px;
height: 20px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div id="div1">x</div>
<div id="div2">
<div id="div2-child">x</div>
</div>
</body>
Demo4:为什么只有div2有marginTop，而div1也感受到了marginTop。有什么办法让div1回到顶部吗？
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
}
#div1 {
display: inline-block;
background-color: red;
width: 50px;
height: 50px;
}
#div2 {
display: inline-block;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
Jor*_*rdy -2
将其添加到您的 CSS 中：
display: flex使body盒子的位置在同一行。（参考）。margin-right: 10px在右边#div1留出空间#div1
body {
margin: 0;
display: flex;
}
#div1 {
display: inline-block;
background-color: red;
width: 50px;
height: 50px;
margin-right: 10px;
}
#div2 {
display: inline-block;
background-color: blue;
width: 50px;
height: 50px;
}
#div2-child {
width: 20px;
height: 20px;
background-color: yellow;
display: inline-block;
}<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<div id="div2-child"></div>
</div>
</body>| 归档时间： |
|
| 查看次数： |
84 次 |
| 最近记录： |