响应 - 在保持高度的同时调整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写它？ 试试这个（与你的小调整）：

<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”来解决此问题。

现在的问题是我已经失去了啤酒图像和文本框之间的空间。我可以在文本中添加填充以将其推到右侧，但宁可有办法维持两个框之间的空间。

任何想法？