Html 响应-调整DIV宽度，同时保持高度

我正试图找出如何最好地处理以下情况下的响应性设计

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

。啤酒含量{
填充：50px 68px；
}
琥珀啤酒{
浮动：左；
}
.琥珀啤酒img{
利润上限：-21px；
}
.琥珀啤酒文本{
浮动：左；
身高：374px；
背景:#f8eddf；
利润率：0.20px；
最大宽度：725px；
宽度：100%；
填充：50px 50px 0 50px；
字号：18px；
}

您应该移除固定的

高度

，并在底部添加

衬垫

。如果希望最小高度与图像高度匹配，请添加

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

---

您应该移除固定的

高度

，并在底部添加

填充物

。如果希望最小高度与图像高度匹配，请添加

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

---

这将是粗糙的，但您是否考虑过使用CSS Flexbox编写它？ 试试这个（稍作调整）：

.啤酒含量{
显示器：flex；
填充：50px 68px；
框大小：边框框；
弯曲方向：行；
柔性包装：包装；
}
琥珀啤酒{
}
.琥珀啤酒img{
利润上限：-21px；
}
.琥珀啤酒文本{
身高：372px；
背景:#f8eddf；
利润率：0.20px；
最大宽度：725px；
宽度：100%；
填充：50px；
字号：18px；
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
}
.琥珀啤酒文本.圆圈{
显示器：flex；
弯曲方向：行；
}
.琥珀啤酒文字.圆圈.啤酒圈{
背景：url（“beer circle.png”）；
背景重复：无重复；
背景尺寸：包含；
宽度：55px；
高度：55px；
}
琥珀色

琥珀啤酒是介于淡淡啤酒和棕色啤酒之间的一种风格。它们通常被归类为淡啤酒。这款啤酒呈深琥珀色，香气中带有柑橘的味道，酒体丰满，可以闻到些许焦糖和咖啡的味道。尽管这种琥珀跳得相当好（32ibu），但它的强健特性和复杂性使它成为了神的甘露，任何一个认真的啤酒爱好者都不应该错过

奥格
1052
ABV
5%
固体火箭发动机
12
伊布
32

---

如果您需要澄清，我可以帮助您。

这将是一个粗糙的过程，但您是否考虑过使用CSS Flexbox编写它？ 试试这个（稍作调整）：

.啤酒含量{
显示器：flex；
填充：50px 68px；
框大小：边框框；
弯曲方向：行；
柔性包装：包装；
}
琥珀啤酒{
}
.琥珀啤酒img{
利润上限：-21px；
}
.琥珀啤酒文本{
身高：372px；
背景:#f8eddf；
利润率：0.20px；
最大宽度：725px；
宽度：100%；
填充：50px；
字号：18px；
框大小：边框框；
显示器：flex；
弯曲方向：立柱；
}
.琥珀啤酒文本.圆圈{
显示器：flex；
弯曲方向：行；
}
.琥珀啤酒文字.圆圈.啤酒圈{
背景：url（“beer circle.png”）；
背景重复：无重复；
背景尺寸：包含；
宽度：55px；
高度：55px；
}
琥珀色

琥珀啤酒是介于淡淡啤酒和棕色啤酒之间的一种风格。它们通常被归类为淡啤酒。这款啤酒呈深琥珀色，香气中带有柑橘的味道，酒体丰满，可以闻到些许焦糖和咖啡的味道。尽管这种琥珀跳得相当好（32ibu），但它的强健特性和复杂性使它成为了神的甘露，任何一个认真的啤酒爱好者都不应该错过

奥格
1052
ABV
5%
固体火箭发动机
12
伊布
32

---

如果您需要澄清，我可以帮助您。

我已设法通过删除.amber-beer文本中的“float:left”来解决此问题

现在的问题是，我丢失了啤酒图像和文本框之间的空间。我可以在文本中添加填充以将其推到右侧，但我更希望有一种方法来保持两个框之间的空间

---

有什么想法吗？

我已经设法解决了这个问题，从.amber-beer文本中删除了“float:left”

现在的问题是，我丢失了啤酒图像和文本框之间的空间。我可以在文本中添加填充以将其推到右侧，但我更希望有一种方法来保持两个框之间的空间

---

有什么想法吗？

这不会导致文本框按宽度增长/收缩。它只是保持相同的宽度，直到它在图像下断裂。但这不会导致文本框按宽度增长/收缩。它只是保持不变