我有两个 div，有两个主要属性显示块和宽度
#block1 {
display:block;
width:20%;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
当我添加 float 属性时，它使两个 div 的行为类似于 inline-block ：
#block1 {
display:block;
width:20%;
float:left;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
float:left;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
为什么添加属性 float:left 会使 div 表现得像内联块
Using float以其他方式将元素从正常文档流中取出inline元素可以环绕它们；它不会让他们表现得像inline-block元素。
如果您想要其他方法来达到相同的效果，请查看以下示例。
示例1：
这是一个使用的示例display: flex在父元素上使子元素保持在同一行。
body {
display: flex;
}
#block1 {
width: 20%;
background-color: red;
height: 100px;
}
#block2 {
width: 70%;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
示例2：
这是一个使用的示例display: inline-block在两个元素上使它们保持在同一行。还，font-size: 0用于父级以确保中间的间隙消失。
body {
font-size: 0;
}
#block1 {
width: 20%;
display: inline-block;
background-color: red;
height: 100px;
}
#block2 {
width: 70%;
display: inline-block;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
示例3：
这是一个使用的示例display: table-cell在两个元素上使它们保持在同一行，同时display: table用于父级。
body {
width: 90%;
display: table;
}
#block1 {
width: 22.2222222%; /* 20% of 90% */
display: table-cell;
background-color: red;
height: 100px;
}
#block2 {
width: 77.7777778%; /* 70% of 90% */
display: table-cell;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
