正在回答 回答被采纳积分+1
1回答
好帮手慕阿满
2018-11-30 11:31:11
同学你好，关于inline-block的演示如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
margin:0;
padding: 0;
}
.child1{
width: 100px;
height: 100px;
background-color: orange;
display: inline-block;
}
.child2{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
.box{
width: 300px;
height: 200px;
background-color: grey;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</body>
</html>如果不对child1和child2加display: inline-block;他们将垂直排列，如图：
加了display: inline-block;后，效果如下：
child1和child2将不再独占一行，使块级元素变成行内元素，拥有行内元素的特性，能够改变元素的height，width的值等。
建议同学多去w3c官网上查找相关知识。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快！
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星