2016-03-10 81 views
0

我在我的代碼中有6個div,我想彼此相鄰。我不知道爲什麼div「五」和「六」不起作用。我在其他方面使用相同的規則,它的工作原理。當我從「container1」中刪除「font-size:0」時,結果是我想要但div之間有一些空格。有任何想法嗎?兩個內嵌塊堆棧之間的垂直空間

body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container1{ 
 
    height: 100%; 
 
    margin-left: 8%; 
 
    margin-right: 8%; 
 
    font-size: 0; 
 
} 
 
.three{ 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 60%; 
 
    height: 50%; 
 
    background-color:aquamarine; 
 
} 
 
.four { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: right; 
 
    width: 40%; 
 
    height: 50%; 
 
    background-color: dodgerblue 
 
} 
 
.five { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 40%; 
 
    background-color: red; 
 
} 
 
.six { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: right; 
 
    background-color: black; 
 
    width: 50%; 
 
    height: 40%; 
 
}
<div class="container1"> 
 
    <div class="header"> 
 
    <h1>jadalnia</h1> 
 
    </div> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
    <div class="four"></div> 
 
    <div class="five"></div> 
 
    <div class="six"></div> 
 
</div>

+0

究竟什麼是你問? –

+0

什麼是「piec」和「szesc」? –

回答

1

試試這個CSS,而不是你的。

body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container1{ 
 
    height: 100%; 
 
    margin-left: 8%; 
 
    margin-right: 8%; 
 
} 
 
.three{ 
 
    float:right; 
 
    width: 60%; 
 
    height: 50%; 
 
    background-color:aquamarine; 
 
} 
 
.four { 
 
    float: right; 
 
    width: 40%; 
 
    height: 50%; 
 
    background-color: dodgerblue 
 
} 
 
.five { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 40%; 
 
    background-color: red; 
 
} 
 
.six { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: right; 
 
    background-color: black; 
 
    width: 50%; 
 
    height: 40%; 
 
}
<div class="container1"> 
 
    <div class="header"> 
 
    <h1>jadalnia</h1> 
 
    </div> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
    <div class="four"></div> 
 
    <div class="five"></div> 
 
    <div class="six"></div> 
 
</div>

+0

非常感謝:) –