Question

我正在努力弄清楚如何最好地处理以下响应式设计案例。

我需要啤酒图像侧面的文本框来增大/缩小它的宽度，但保持高度以匹配啤酒图像的高度。在某个断点处，我将在啤酒图像下移动该文本框。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

我设法通过删除＆＃34; float：left＆＃34;来解决这个问题。来自.amber-beer-text。

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

有什么想法吗？

响应 - 在保持高度的同时调整DIV宽度

3 个答案: