応答性 - 高さを維持しながらDIVの幅を調整する

Question

私は応答性のあるデザインの次のケースをどのように処理するのが最適かを考えようとしています。

ビール画像の横にテキストボックスが必要ですが、ビール画像の高さに合わせて高さを維持しながら幅を拡大/縮小します。あるブレークポイントでは、そのテキストボックスをビール画像の下に移動させます。

.beer-content { 
 
    padding: 50px 68px; 
 
} 
 
.amber-beer { 
 
    float: left; 
 
} 
 
.amber-beer img { 
 
    margin-top: -21px; 
 
} 
 
.amber-beer-text { 
 
    float: left; 
 
    height: 374px; 
 
    background: #f8eddf; 
 
    margin: 0 0 0 20px; 
 
    max-width: 725px; 
 
    width: 100%; 
 
    padding: 50px 50px 0 50px; 
 
    font-size: 18px; 
 
}

<div class="beer-content"> 
 
    <div class="amber-beer"><img src="_img/beer-amber-ale.png" alt="Amber Ale" /></div> 
 
    <div class="amber-beer-text"> 
 
     <p class="beer-title"><img src="_img/beer-title-bars.png" alt="" /> Amber</p> 
 
     <p>Amber beers are a style that fall between light pale ales and brown ales. They are generally categorized as pale ale. This beer is dark amber in colour, has traces of citrus in its aroma, and one can pick up hints of caramel and coffee in its full bodied flavour. Though it is fairly well hopped (32ibu), the robust character and complexity of this fine amber turns it into nectar of the gods that no serious beer drinker should pass up.</p> 
 
     <div class="beer-circle"> 
 
      <span>OG</span> 
 
      1052 
 
     </div> 
 
     <div class="beer-circle"> 
 
      <span>ABV</span> 
 
      5% 
 
     </div> 
 
     <div class="beer-circle"> 
 
      <span>SRM</span> 
 
      12 
 
     </div> 
 
     <div class="beer-circle"> 
 
      <span>IBU</span> 
 
      32 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
</div> \t \t 
 
</div>

Answer 1

あなたは、固定heightを削除し、同様に下のためpaddingを追加する必要があります。画像の高さと最低の高さを一致させる場合は、min-heightを追加してください。

.amber-beer-text { 
    float: left; 
    min-height: 374px; 
    background: #f8eddf; 
    margin: 0 0 0 20px; 
    max-width: 725px; 
    width: 100%; 
    padding: 50px; 
    font-size: 18px; 
} 

Answer 2

これは大雑把になりますが、CSS Flexboxで書いたと思いますか？ （YOUR微調整して）これを試してみてください：

<style> 
    .beer-content { 
      display: flex; 
      padding: 50px 68px; 
      box-sizing: border-box; 
      flex-direction: row; 
      flex-wrap: wrap; 
    } 
    .amber-beer { 
    } 
    .amber-beer img { 
     margin-top: -21px; 
    } 
    .amber-beer-text { 
     height: 372px; 
     background: #f8eddf; 
     margin: 0 0 0 20px; 
     max-width: 725px; 
     width: 100%; 
     padding: 50px; 
     font-size: 18px; 
     box-sizing: border-box; 
     display: flex; 
     flex-direction: column; 

    } 

    .amber-beer-text .circles{ 
     display: flex; 
     flex-direction: row; 
    } 

    .amber-beer-text .circles .beer-circle{ 
     background: url("beer-circle.png"); 
     background-repeat: no-repeat; 
     background-size: contain; 
     width: 55px; 
     height: 55px; 
} 
</style> 
<div class="beer-content"> 

      <div class="amber-beer"><img src="beer-amber-ale.png" alt="Amber Ale" /></div> 
      <div class="amber-beer-text"> 
       <p class="beer-title"><img src="beer-title-bars.png" alt="" /> Amber</p> 
       <p>Amber beers are a style that fall between light pale ales and brown ales. They are generally categorized as pale ale. This beer is dark amber in colour, has traces of citrus in its aroma, and one can pick up hints of caramel and coffee in its full bodied flavour. Though it is fairly well hopped (32ibu), the robust character and complexity of this fine amber turns it into nectar of the gods that no serious beer drinker should pass up.</p> 
       <div class="circles"> 
        <div class="beer-circle"> 
         <span>OG</span> 
         1052 
        </div> 
        <div class="beer-circle"> 
         <span>ABV</span> 
         5% 
        </div> 
        <div class="beer-circle"> 
         <span>SRM</span> 
         12 
        </div> 
        <div class="beer-circle"> 
         <span>IBU</span> 
         32 
        </div> 
       </div> 
      </div> 
     </div> 

あなたが明確化が必要な場合は、私はあなたを助けることができます。

Answer 3

私はこの問題を、.amber-beer-textから "float：left"を削除することで解決しました。

問題は、私がビール画像とテキストボックスの間のスペースを失ったことです。テキストにパディングを追加して右にプッシュすることはできますが、むしろ2つのボックスの間のスペースを維持する方法があります。

アイデア？