首先！！！！這個問題應該是去面試前端會經常問到的問題！！！ 如，下麵這個例子： 按照正常思維的話，這個.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>
效果最終顯示：
