Html 产品项目：响应式布局

对于一个相对简单的响应性布局问题，我很难找到一个好的解决方案

这是一个产品项组件，它应该如图所示

它带来了一些同等高度的要求（在桌面img上显示其他内容，在移动img上显示产品信息）

作为独立的，这不会是一个问题，但我很难找到一个适用于两个不同视口且没有重复内容/标记的好方法

主要问题是包裹/流动行为。通常我会在信息和细节周围放置一个包装，但由于手机版本的原因，这是不可能的

也许能给我一个很好的提示如何解决我的问题

非常感谢

谢谢你，埃尔达德夫

。产品项{
显示器：flex；
柔性包装：包装；
边框：1px实心#333；
}
.产品项目图片{
宽度：25%；
背景色：#ccc；
}
.产品-项目信息{
宽度：75%；
背景颜色：绿色；
}
.产品项目详细信息{
宽度：100%；
背景颜色：蓝色；
}

img
信息内容
详细内容

。产品项{
}
.product-item_uu图像img{宽度：100%}
.产品项目图片{
浮动：左；
宽度：20%；
高度：400px；
背景#ffd9d9；
}
.产品-项目信息{
浮动：左；
宽度：80%；
背景#f1f1；
文本对齐：居中；
填充：80px0；
}
.产品项目详细信息{
浮动：左；
宽度：80%；
背景：#bfbf；
文本对齐：居中；
填充：80px0；
}
@介质（最大宽度：767px）{
.产品项目图片{
浮动：左；
宽度：20%；
}
.产品-项目信息{
浮动：对；
宽度：70%；
背景#f1f1；
文本对齐：居中；
填充：120px0；
}
.产品项目详细信息{
浮动：无；
宽度：100%！重要；
背景：#bfbf；
文本对齐：居中；
填充：80px0；
明确：两者皆有；
}
}

img
信息内容
详细内容

。产品项{
}
.product-item_uu图像img{宽度：100%}
.产品项目图片{
浮动：左；
宽度：20%；
高度：400px；
背景#ffd9d9；
}
.产品-项目信息{
浮动：左；
宽度：80%；
背景#f1f1；
文本对齐：居中；
填充：80px0；
}
.产品项目详细信息{
浮动：左；
宽度：80%；
背景：#bfbf；
文本对齐：居中；
填充：80px0；
}
@介质（最大宽度：767px）{
.产品项目图片{
浮动：左；
宽度：20%；
}
.产品-项目信息{
浮动：对；
宽度：70%；
背景#f1f1；
文本对齐：居中；
填充：120px0；
}
.产品项目详细信息{
浮动：无；
宽度：100%！重要；
背景：#bfbf；
文本对齐：居中；
填充：80px0；
明确：两者皆有；
}
}

img
信息内容
详细内容

试试这个：它对我有用

float

和

@media（）

用于使其响应。如果不工作，请告诉我。帮助别人是我的荣幸：）

*{
字体系列：arial；
颜色：#aaa；
字体大小：正常；
}
.包装纸{
边框：实心1px#3636；
宽度：500px；
高度：200px；
填充：10px；
}
.形象{
浮动：左；
高度：100px；
宽度：20%；
边框：实心1px#3636；
}
.images>img{
身高：90%；
}
.产品信息{
浮动：左；
左缘：2%；
边框：实心1px#3636；
宽度：77%；
高度：100px；
文本对齐：居中；
}
.产品详情{
浮动：左；
利润率最高：2%；
边框：实心1px#3636；
宽度：99%；
文本对齐：居中；
高度：85px；
}
@介质（最大宽度：767px；）{
.形象{
浮动：左；
高度：200px；
宽度：20%；
边框：实心1px#3636；
}
.产品详情{
浮动：对；
利润率最高：2%；
左边缘：22%；
边框：实心1px#3636；
宽度：77%；
文本对齐：居中；
高度：85px；
}
}

桌面
产品信息
产品详情

试试这个：它对我有用

float

和

@media（）

用于使其响应。如果不工作，请告诉我。帮助别人是我的荣幸：）

*{
字体系列：arial；
颜色：#aaa；
字体大小：正常；
}
.包装纸{
边框：实心1px#3636；
宽度：500px；
高度：200px；
填充：10px；
}
.形象{
浮动：左；
高度：100px；
宽度：20%；
边框：实心1px#3636；
}
.images>img{
身高：90%；
}
.产品信息{
浮动：左；
左缘：2%；
边框：实心1px#3636；
宽度：77%；
高度：100px；
文本对齐：居中；
}
.产品详情{
浮动：左；
利润率最高：2%；
边框：实心1px#3636；
宽度：99%；
文本对齐：居中；
高度：85px；
}
@介质（最大宽度：767px；）{
.形象{
浮动：左；
高度：200px；
宽度：20%；
边框：实心1px#3636；
}
.产品详情{
浮动：对；
利润率最高：2%；
左边缘：22%；
边框：实心1px#3636；
宽度：77%；
文本对齐：居中；
高度：85px；
}
}

桌面
产品信息
产品详情

您可以添加一个解释吗？通常情况下，代码块本身不是首选的。您可以添加一个解释吗？代码块本身通常不是首选的。