2016-07-28 78 views
0

我在一個容器中並排放置了四行三個div。整個事情應該是敏感的,所以它可以自動調整到可變容器寬度,即桌面三格,平板電腦旁邊的兩個div和智能手機,單獨一個div。 我認爲當爲每個div設置30%的寬度時,剩餘的10%將按照邊距在兩個div之間分割,即每個div之間5%的邊距。但是現在我得到了我的第三個分區權利的全部10%的保證金,這意味着所有的div都粘在一起了。如何在div之間獲得2 x 5%的保證金(保證金 - 右側:5%不起作用)?三個並列的div,但它們之間沒有自動保證金

.aaa { 
 
    position: relative; 
 
    display: block; 
 
    text-align: left; 
 
\t margin-top:30px; 
 
\t padding:2px 25px 2px 25px; 
 
\t text-align:center; 
 
\t float:left; 
 
\t width:30%; 
 
\t height:239px; 
 
    background-color:blue; 
 
} 
 

 
.bbb { 
 
    position: relative; 
 
    display: block; 
 
    text-align: left; 
 
\t margin-top:30px; 
 
\t padding:2px 25px 2px 25px; 
 
\t text-align:center; 
 
\t float:left; 
 
\t width:30%; 
 
\t height:239px; 
 
    background-color:grey; 
 
} 
 

 
.ccc { 
 
    position: relative; 
 
    display: block; 
 
    text-align: left; 
 
\t margin-top:30px; 
 
\t padding:2px 25px 2px 25px; 
 
\t text-align:center; 
 
\t float:left; 
 
\t width:30%; 
 
\t height:239px; 
 
    background-color:green 
 
} 
 

 
.ddd { 
 
    position: relative; 
 
    display: block; 
 
    text-align: left; 
 
\t margin-top:30px; 
 
\t padding:2px 25px 2px 25px; 
 
\t text-align:center; 
 
\t float:left; 
 
\t width:30%; 
 
\t height:239px; 
 
    background-color:yellow 
 
} 
 

 
.eee { 
 
    position: relative; 
 
    display: block; 
 
    text-align: left; 
 
\t margin-top:30px; 
 
\t padding:2px 25px 2px 25px; 
 
\t text-align:center; 
 
\t float:left; 
 
\t width:30%; 
 
\t height:239px; 
 
    background-color:red 
 
} 
 

 
.fff { 
 
    position: relative; 
 
    display: block; 
 
    text-align: left; 
 
\t margin-top:30px; 
 
\t padding:2px 25px 2px 25px; 
 
\t text-align:center; 
 
\t float:left; 
 
\t width:30%; 
 
\t height:239px; 
 
    background-color:black 
 
}
<div class="container"> 
 
<div class="aaa"><a href="#"><h1>aaa</h1></a></div> 
 
<div class="bbb"><a href="#"><h1>bbb</h1></a></div> 
 
<div class="ccc"><a href="#"><h1>ccc</h1></a></div> 
 
<div class="ddd"><a href="#"><h1>ddd</h1></a></div> 
 
<div class="eee"><a href="#"><h1>eee</h1></a></div> 
 
<div class="fff"><a href="#"><h1>fff</h1></a></div> 
 
</div>

回答

2

確保您使用box-sizing使得padding被正確地計算。您也可能希望利用媒體查詢來實現您在較小屏幕上減少並排元素的目標。

https://jsfiddle.net/a6ry5m7v/

當然,還有更現代的方法(如flex容器),但根據您最初的意見,這似乎是您所期望

的方法
相關問題