具有相等保證金的響應式2線網格

Question

通過使用只有百分比，如何創建適合指定容器的相等保證金？我在下面嘗試，但未能實現相同的保證金。

body { 
 
    padding:0; 
 
    margin:0; 
 
    background:#000; 
 
} 
 
.category_wrap div { 
 
    float: left; 
 
    width: 49%; 
 
    background: red; 
 
    height: 50px; 
 
    margin-left: 1%; 
 
    margin-bottom: 1%; 
 
    overflow: hidden; 
 
}

<div class="category_wrap"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>

Answer 1

JSFiddle link

.category_wrap div:nth-child(even) { 
    margin-right: 1%; 
} 

我還增加了div柱48.5%寬度以補償餘量。

48.5來自（100-3）/ 2其中3是每一行左/右邊距的總百分比。

另一種選擇是將其包裝在container，給它的98%的寬度和給margin: 0 1%;到它，然後給奇數div列margin-right: 1%;

Answer 2

添加媒體查詢在CSS上懸而未決您的問題

Answer 3

不能完全確定你正在尋找的確切療效，但@knitevision是正確的通過CSS使用第n個孩子選擇平衡保證金攔腰在容器div的左側和右側留有邊距的列。

這是一個CodePen

HTML：

<div class="category_wrap"> 
    <div class="container">1</div> 
    <div class="container">2</div> 
    <div class="container">3</div> 
    <div class="container">4</div> 
</div> 

CSS：

body{ 
    padding:0; 
    margin:0; 
    background: black; 
    text-align: center; 
} 
.category_wrap div{ 
    float: left; 
    background: red; 
    width: 48.5%; 
    height: 50px; 
} 
.container:nth-child(odd){ 
    background: blue; 
    margin: 0 .5% 0 1%; 
} 
.container:nth-child(even){ 
    margin: 0 1% 0 .5%; 
} 

像@ knitevision的答案，如果你正在尋找一個1％的保證金的三項排水溝， 48.5％成爲每個div寬度的幻數：（100-3）/ 2。

另外，在高度參數中使用％邊距時請小心，因爲1％高度不等於寬度的1％，並且邊距將顯得偏離。

延伸閱讀： How nth-child Works

Answer 4

box-sizing: border-box is the best way to do this. It changes the width and height to include the padding and border.The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. 

小提琴演示

https://jsfiddle.net/DhwaniSanghvi/ckvpc0to/

   <div class="category_wrap"> 
       <div>1</div> 
       <div>2</div> 
       <div>3</div> 
       <div>4</div> 
       <div>5</div> 
       <div>6</div> 
       <div>7</div> 
       <div>8</div> 
      </div> 

---

body { 
    padding:0; 
    margin:0; 
    background:#000; 
} 

.category_wrap { 
    overflow: hidden; 
} 
.category_wrap div { 
    float: left; 
    width: 50%; 
    background: red; 
    height: 50px; 
    overflow: hidden; 
    padding: 10px; 
border:2px solid black; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}