响应 Div 内容

Question

目标：我正在尝试设置内容样式以响应其父级 div 的尺寸。

要求的行为

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

我必须满足的条件:

• 不允许我使用任何媒体查询。
• 我不允许使用任何 JavaScript
• 必须在 html 和 CSS 中全部完成。

.product-image-area {
text-align: center;
width: 100%;
max-width: 180px;
display: inline-block;
}

JsFiddle

编辑： 由于我的问题很复杂，我将说明这个任务的怪物：

图片：http://i63.photobucket.com/albums/h123/Damian6969/Stack_EXample_zpsmskwkba0.png

所以我在黑色矩形（我们称其为 "inner" 容器）中的 html 代码将始终相同。

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

橙色容器（"outer" 容器）的尺寸将发生变化。

我需要我的内部容器能够响应。

...伙计们，我不知道我是否还能再简化一下。另一个例子是一般的响应式代码。但是你没有视口，只有一个外部 div.

Answer 1

使用

创建一个外部容器

text-align: center;

然后给你的内胆

display: inline-block;

见Fiddle

Answer 2

我仍然不确定您要修复什么，但这是我所做的调整：

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

Demo