Question

我有一个包含9个div标签的网格。所以有3行3个div。

每个div都有一个背景图像（第二行中的第二个div除外），我需要左右两侧的div来自动调整，具体取决于中间div的高度。

我该怎么做？

这里有一个jsfiddle来说明我的观点：http://jsfiddle.net/TZCj2/2/ - 正如你所看到的，两边的两个div都不能自动调整。

非常感谢。

<head>
<style>
#top-left {
    width: 25px;
    height: 25px;
    float: left;
}
#top-right {
    width: 25px;
    height: 25px;
    float: right;
}
#top {
    background-image: url(http://placehold.it/25x25);
    background-repeat: repeat-x;
    height: 25px;
}
#bottom-left {
    width: 25px;
    height: 25px;
    float: left;
}
#bottom-right {
    width: 25px;
    height: 25px;
    float: right;
}
#bottom {
    background-image: url(http://placehold.it/25x25);
    background-repeat: repeat-x;
    height: 25px;
}
#left {
    width: 25px;
    float: left;
    background-image: url(http://placehold.it/25x25);
    background-repeat: repeat-y;
    height: 100%;
    min-height: 100%;
}

#right {
    width: 25px;
    float: right;
    background-image: url(http://placehold.it/25x25);
    background-repeat: repeat-y;
    height: 100%;
    min-height: 100%;
}
#middle {
    padding: 25px;
    padding-left: 50px;
    padding-right: 50px;
    min-height: 100%;
    height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="top-left"><img src="http://placehold.it/25x25" width="25" height="25"></div>
<div id="top-right"><img src="http://placehold.it/25x25" width="25" height="25"></div>
<div id="top"></div>

<div id="left"></div>
<div id="right"></div>
<div id="middle">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="bottom-left"><img src="http://placehold.it/25x25g" width="25" height="25"></div>
<div id="bottom-right"><img src="http://placehold.it/25x25" width="25" height="25"></div>
<div id="bottom"></div>
</div>
</body>

Answer 1

找到此页面修复了我的问题：http://css-tricks.com/fluid-width-equal-height-columns/

左右DIV不会自动调整到容器上的高度

1 个答案: