Html 响应Div内容

目标：我正在尝试设置内容的样式，以响应其父分区的维度

要求的行为

• 根据div容器的不同，内容将对其作出反应并进行适当的缩放
• 我需要内容始终以中心为中心
• 当有足够的空间水平放置2个容器时，将容器向上移动（例如JsFiddle:card-container2并排显示图像和卡片信息，但按钮仍然居中）

我必须满足的条件：

• 我不允许使用任何媒体查询
• 我不允许使用任何JavaScript
• 这一切都必须在html和CSS中完成

。产品图像区{
文本对齐：居中；
宽度：100%；
最大宽度：180像素；
显示：内联块；
}

编辑： 由于我问题的复杂性，我将举例说明我被赋予的一项任务：

图片：

因此，我在黑色矩形中的html代码（让我们称之为“内部”容器）将始终保持不变

此内部容器的宽度始终为100%，高度始终为100%

橙色容器（“外部”容器）的尺寸将发生变化

我需要我的内部容器响应

---

…我不知道我能不能再简化这件事了伙计们。另一个例子是响应性代码。但是，您只有一个外部div，而不是视口。

使用创建外部容器

text-align: center;

然后给你的内部容器

display: inline-block;

---

请参见

我仍然不确定您试图修复的是什么，但以下是我所做的调整：

.c-product-card {
    ...
    padding: 10px;
    text-align: center;
}
.card-info {
    ...
    text-align: left;
}

---

欢迎来到SO。请把问题的复杂程度降低到一点。事实上，不清楚你在问什么。而且，带有一系列内联样式的HTML会让你抱怨不已。请花点时间将样式移动到样式表或至少嵌入样式标记来准备干净的标记。我希望我的编辑使我的问题更清楚。也修复了JsFiddle。谢谢改进了很多，但仍然太广泛了。你有一个需求清单，但你没有说哪一项是绊倒你的。另外，不要认为“级联”是这里的正确术语。你是说换一条新路线吗？很好，很简单。非常感谢，先生！