box-sizing：边框框；百分比宽度但像素填充

Question

我一直在创建一个网格，它使用 padding 作为排水沟。有时需要没有排水沟（完整 width 图像）所以我只是创建了一个 class 删除了 padding.

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

简化的测试用例：

代码

*,
*: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;
}

<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>

有没有简单的解决方法？

Answer 1

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

Answer 2

您可以将 img 设置为 width:100% 并删除 flex:1 和 float:left，如果您想保持 display:flex 等高 [=17] =]

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>

box-sizing：边框框；百分比宽度但像素填充

Box-sizing: border box; percentage width but pixel padding

html

css

border-box

flexbox