Question

我正在尝试创建4个向左浮动的框，宽度为25％，侧面为margin:0 10px，以提供间距，但最后一个div被向下推。

我尝试使用box-sizing但它没有做任何事情。

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

.box {
  width: 25%;
  background: #333;
  float: left;
  color: #fff;
  margin: 0 10px;
  padding: 10px;
}

Answer 1

根据我的评论：

使用width: calc(25% - 20px)

尝试box-sizing: border-box

＆＃13;

.box {
  width: calc(25% - 20px); /* takes care of margin */
  background: #333;
  float: left;
  color: #fff;
  margin: 0 10px;
  box-sizing: border-box; /* takes care of padding */
  padding: 10px;
}

＆＃13;

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

＆＃13;

如果你无法使用calc，你可以删除边距并使用内部框（通常我做的是使它与旧浏览器兼容）：

＆＃13;

.box {
  width: 25%;
  box-sizing: border-box;
  padding: 0 10px;
  float: left;
}
.box .inner {
  background: #333;
  color: #fff;
  padding: 10px;
}

＆＃13;

<div class="box"><div class="inner">1</div></div>
<div class="box"><div class="inner">2</div></div>
<div class="box"><div class="inner">3</div></div>
<div class="box"><div class="inner">4</div></div>

＆＃13;

Answer 2

喜欢@toby说你必须减少宽度的百分比。随着填充，你最终得到超过100％。我可以得到它的最小工作是18％

＆＃13;

.box {
  width: 18%;
  background: #333;
  float: left;
  color: #fff;
  margin: 0 10px;
  padding: 10px;
}

＆＃13;

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

＆＃13;

创建div左侧浮动宽度相同的div框

2 个答案: