似乎当我在元素上使用float或inline-block时,它们的边距或填充会加倍。为了说明这一点,中间和底部之间的边距是5%。但是,顶部的尺寸也是5%,顶部是底部的一半。
当我检查JSFiddle并重新调整窗口大小时,我注意到顶部不会相对于屏幕窗口的宽度按高度进行缩放,但是垂直边距确实如此。
任何修复或解释都将不胜感激。
html {
overflow-y: scroll;
}
* {
margin: 0px;
padding: 0px;
border: none;
}
div {
outline: black solid 1px;
}
.top {
position: fixed;
width: 100%;
height: 5%;
}
.section {
float: left;
width: 20%;
height: 100%;
}
.left {
float: left;
vertical-align: top;
width: 25%;
margin: 5% 0px;
}
.left1 {
float: right;
width: 80%;
}
.left2 {
float: right;
width: 80%;
}
.right {
float: left;
vertical-align: top;
width: 75%;
margin: 5% 0px;
}
.right1 {
float: left;
vertical-align: top;
width: 66.66666%;
}
.right2 {
float: left;
vertical-align: top;
width: 33.33333%;
}
.right21 {
width: 80%;
}
.right22 {
width: 80%;
}
.bottom {
width: 100%;
}

<div class="top">
<div class="section">top section 1
</div>
<div class="section">top section 2
</div>
<div class="section">top section 3
</div>
<div class="section">top section 4
</div>
<div class="section">top section 5</div>
</div>
<div class="left">
<div class="left1">left 1
</div>
<div class="left2">left 2</div>
</div>
<div class="right">
<div class="right1">right 1
</div>
<div class="right2">
<div class="right21">right 2 1
</div>
<div class="right22">right 2 2</div>
</div>
</div>
<div class="bottom">
bottom
</div>
&#13;
的jsfiddle:
答案 0 :(得分:0)