盒子大小：边框;百分比宽度，但像素填充

Question

我一直在创建一个网格，它使用padding作为排水沟。在没有排水沟（完整width图片）的情况下，我只需创建一个删除padding的课程。

问题是，当使用50% width时，即使它使用border-box，也不是真正的50%。

简化测试用例：

JsFiddle

代码

＆＃13;

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
.row {
  zoom: 1;
  &: before, &: after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}
.half {
  width: 50%;
  padding: 10px;
}
.no-pad {
  padding: 0;
}
.column {
  float: left;
}
img {
  max-width: 100%;
  height: 100%;
  display: block;
}
.eq-height-container {
  display: flex;
}
.eq-height-column {
  flex: 1;
}

＆＃13;

<div class="row eq-height-container">
  <div class="column half eq-height-column" style="background-color: red;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus qui ea, quasi pariatur sed esse beatae porro in temporibus ipsum delectus, quisquam. Saepe sapiente, facere repellat tenetur quae aut.</p>
  </div>
  <div class="column half no-pad eq-height-column">
    <img src="http://lorempixel.com/400/200" alt="">
  </div>
</div>

<div class="row eq-height-container">
  <div class="column half no-pad eq-height-column">
    <img src="http://lorempixel.com/400/200" alt="">
  </div>
  <div class="column half eq-height-column" style="background-color: red;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus qui ea, quasi pariatur sed esse beatae porro in temporibus ipsum delectus, quisquam. Saepe sapiente, facere repellat tenetur quae aut.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有一个简单的方法吗？

Answer 1

那是因为你混在flex。如果您删除.eq-height-column，则会看到两列的宽度相同。

Answer 2

您可以将img设置为width:100%并删除flex:1和float:left，如果您想让display:flex保持相同的身高

body {
  margin: 0
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
.row::before,
.row::after {
  content: "";
  display: table;
}
.row::after {
  clear: both;
}
.half {
  width: 50%;
  padding: 10px;
  background: red
}
.no-pad {
  padding: 0;
}
 img {
  width: 100%;
  height: 100%;
  display: block;
}
.eq-height-container {
  display: flex;
}
.eq-height-column {
  /* flex: 1;*/
}

<div class="row eq-height-container">
  <div class="column half eq-height-column">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus qui ea, quasi pariatur sed esse beatae porro in temporibus ipsum delectus, quisquam. Saepe sapiente, facere repellat tenetur quae aut.</p>
  </div>
  <div class="column half no-pad eq-height-column">
    <img src="//lorempixel.com/400/200" alt="">
  </div>
</div>

<div class="row eq-height-container">
  <div class="column half no-pad eq-height-column">
    <img src="//lorempixel.com/400/200" alt="">
  </div>
  <div class="column half eq-height-column">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus qui ea, quasi pariatur sed esse beatae porro in temporibus ipsum delectus, quisquam. Saepe sapiente, facere repellat tenetur quae aut.</p>
  </div>
</div>