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%;
}

我还在48.5%列添加了div宽度以补偿保证金。

48.5来自（100-3）/ 2，其中3是每行左/右边距的总百分比。

另一种选择是将其包装在container中，给它宽98%并给它margin: 0 1%;，然后给div列奇{{{} 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;
}

具有相同边际的响应2 col网格

4 个答案: