响应 - 在保持高度的同时调整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> </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”来解决这个问题。

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

有任何想法吗？