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

Question

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

问题是，当使用 a 时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相同的高度

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>