Question

我对浮动框中的边距有问题。

这是Html和CSS代码。

* {
  margin: 0;
  height: 0;
}
#main {
  width: 50%;
  background: red;
  height: 200px;
}
.box {
  background: orange;
  float: left;
  width: 19%;
  height: 100px;
  margin: 0 1% 0 0;
}

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

在这段代码中，我实际上希望这5个盒子具有相等的间距，最后和第一个盒子应该接触容器的边缘。问题是，我无法完成这项任务。当我尝试设置相等的边距值时，间距变得相等，但最后一个框不会触及容器。当我增加保证金值时，框会继续下一行。

Answer 1

您可以使用flexbox解决问题。

将display: flex;和justify-content: space-between;分配给#main div，然后移除您为.box div设置的保证金。

<强> CSS

#main{
  display: flex;
  justify-content: space-between;
}

.box{
  margin:0 1% 0 0;  /* <-- Remove This */
}

<强> JSFiddle

*
{
margin:0;
height:0;
}

#main{
width:50%;
background:red;
height:200px;
display: flex;
justify-content: space-between;
}

.box{
background:orange;
float:left;
width:19%;
height:100px;
}

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

可能是这样的（左边距首先在所有方框上指定，然后在第一个方框上删除）：

＆＃13;

* {
  margin: 0;
  height: 0;
}
#main {
  width: 50%;
  background: red;
  height: 200px;
}

.box{
background:orange;
float:left;
width:18%;
height:100px;
margin:0 0 0 2.5%;
}

#main > div:first-child{
margin-left:0; 
}

＆＃13;

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

计算宽度以便5*18% + 4*2.5% = 100%（5个方框，因此有4个分隔线）。

Answer 3

如果您不喜欢需要Flexbox或:first-child之类的解决方案（例如，如果您需要支持旧浏览器），您可以尝试以下方式：

＆＃13;

* {
    margin:0;
    height:0;
}

#main {
    width:50%;
    background:red;
    height:200px;
}

#box-wrapper {
    margin:0 -1.1% 0 0;
}

.box {
    background:orange;
    float:left;
    width:19%;
    height:100px;
    margin:0 1% 0 0;
}

＆＃13;

<div id="main">
    <div id="box-wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

＆＃13;

另见this Fiddle。

Answer 4

在您的情况下，您可以使用Ore(DIAMOND_ORE选择器来调整上一个Ore(DIAMOND_ORE,1,1,1,0,5,STONE)＆amp;你还需要将最后一个向右浮动，将其余的边距值更改为:last-of-type（因此它不会流到下一行）

Fiddle Updated

.box

但我强烈建议您使用flexbox进行这些布局。让生活更轻松。

等空间保证金CSS

4 个答案: