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;
}

要了解其工作原理，请访问演示文件小提琴：http://jsfiddle.net/audetwebdesign/r8LUA/

如何运作

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

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

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

Answer 2

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

响应式Web设计3个相等高度的列

2 个答案: