html - 响应式 Div 内容

Question

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

要求的行为

• 内容会根据 div 容器使用react并适当缩放。
• 我需要内容始终居中。
• 当有足够的空间水平放置 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

所以我在黑色矩形(我们称之为“内部”容器)中的 html 代码将始终相同。

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

橙色容器(“外部”容器)的尺寸会发生变化。

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

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

Answer 1

创建一个外部容器

text-align: center;

然后给你的内胆

display: inline-block;

参见 Fiddle