关于两个DIV之间的空白字符
程序员文章站
2022-07-11 17:16:50
首先！！！！这个问题应该是去面试前端会经常问到的问题！！！ 如，下面这个例子： 按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。 效果如下图所示： 想要解决这种现象有两个办法： 效果最终显示： ......
首先！！！！这个问题应该是去面试前端会经常问到的问题！！！
如，下面这个例子：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1024px;
height: 2000px;
margin: 0 auto;
}
.container > div {
display: inline-block;
}
.left {
width: 80%;
height: 100%;
background-color: red;
}
.right {
width: 20%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。
效果如下图所示：
想要解决这种现象有两个办法：
- 将两个div如下放置：（注意！！！虽然效果实现了，但是这样治标不治本，当自动格式化代码时又会回到原来的样子，显得麻烦）
<div class="container"> <div class="left"></div><div class="right"></div> </div> - 给父容器.container 加上 font-size:0:
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>独秀不爱秀</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { width: 1024px; height: 2000px; margin: 0 auto; font-size: 0; } .container > div { display: inline-block; } .left { width: 80%; height: 100%; background-color: red; } .right { width: 20%; height: 100%; background-color: green; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
效果最终显示：
上一篇： CSS3动画实践——简易牛顿摆
下一篇： 前端编写手机兼容页面（简易方式）