html - 响应式网页设计 3 等高列

Question

对于响应式设计，我尝试使用 3 个相等高度的列，但其中一个列是调整大小的图像。我已经能够拥有 3 个等高的文本列，但是添加图像会使事情变得混乱。当用户缩小浏览器时，我需要将列调整为图像的高度，因为它正在调整大小。

例如。蓝色背景的 20% 文本列。20% 文本列，红色背景 60% 列，仅包含调整大小的图像。

实现这一目标的最佳方法是什么？

Answer 1

这是开始灵活布局的一种方法。

您的 HTML 可能如下所示：

<div class="wrapper">
    <div class="bookend left">
        <div class="content">You can put text in here...</div>
    </div>
    <div class="bookend right">
        <div class="content">or here as you need.</div>
    </div>
    <div class="image-panel">
        <img src="http://www.placekitten.com/400/300">
    </div>
</div>

和CSS：

.wrapper {
    width:100%;
    border: 1px dotted blue;
    display: table;
}
.bookend {
    display: table-cell;
    vertical-align: top;
    width: auto;
    min-width: 100px;
}
.bookend .content {
    display: inline-block;
    width: 100px;
    background-color: pink;
    text-align: left;
}
.image-panel {
    display: table-cell;
    vertical-align: top;
    background-color: green;
}
.image-panel img {
    width: 100%;
    vertical-align: top;
}
div.bookend.left {
    background-color: blue;
}
div.bookend.right {
    background-color: red;
}

要查看它是如何工作的，请访问演示 Fiddle：http: //jsfiddle.net/audetwebdesign/r8LUA/

这是如何工作的

我有一个div.wrapper包含三个子元素的父块，其右侧包含一个随窗口大小扩展的横向图像。

我使用 table 和 table-cell 的 CSS 显示属性来获得三个等高的列。

如果要向左右元素添加内容，将内容放置在固定宽度的子容器（粉红色框）中会有所帮助。如果您希望红色和蓝色面板具有相同的宽度，这一点至关重要。

Answer 2

设置.class img{width: ;heigh: ;列的大小。这会将所有图像的大小调整为此大小。