1

ガターに使用するグリッドを作成していますpadding。widthガター（フルイメージ）が必要な場合があるため、 padding.

問題は、 を使用している50% width場合でも、を使用している場合border-box、真に ではないこと50%です。

縮小されたテスト ケース:

Jsフィドル

コード

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

これを回避する簡単な方法はありますか？

4

2 に答える 2

0

同じ高さを維持したい場合は、設定imgしwidth:100%て削除することもできますflex:1float:leftdisplay: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>

于 2016-03-11T14:45:05.980 に答える