沒有inner會有元素覆蓋,加了inner后,就不會有了,原因是什么?
我的代碼是這樣的,為什么有子元素inner后,就可以實現(xiàn)這個雙飛翼布局的效果呢?
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="utf-8"?/>
????????<title>雙飛翼布局</title>
????????<style>
????????????.parent{
????????????????width:100%;
????????????????position:absolute;
????????????????background-color:?chartreuse;
????????????}
????????????.left,.right{
????????????????height:300px;
????????????????width:200px;
????????????}
????????????.left{
????????????????background-color:burlywood;
????????????????position:absolute;
????????????????left:0;
????????????????top:0;
????????????}
????????????.right{
????????????????background-color:?red;
????????????????position:absolute;
????????????????right:0;
????????????????top:0;
????????????}
????????????.inner{
????????????????margin:0?200px;
????????????????background-color:?cadetblue;
????????????????height:300px;
????????????}
????????</style>
????</head>
????<body>
????????<div?class="parent">
????????????<div?class="center"><div?class="inner">居中自適應(yīng)</div></div>
????????????<div?class="left">定寬局左</div>
????????????<div?class="right">定寬局右</div>
????????</div>
????</body>
</html>
2020-03-08
我也是新人 我的理解是 首先inner也是div標(biāo)簽 那么會繼承父級標(biāo)簽的寬度 也就是默認(rèn)整個屏幕的寬度 這個情況下是有重疊的 但是他給#inner設(shè)置了CSS樣式(margin-left,margin-right),也就是左外邊距和右外邊距。所以正好就不跟left和right的div標(biāo)簽有重合了。