Question

我有一个包含7个单元格的表格，4个包含图像，3个用作间距。图像单元格没有宽度，但间隔单元格没有。

|image| |image| |image| |image|

容器具有最小和最大宽度，并且表格宽度为100％，我希望图像使用表格单元格调整大小，以便间隔单元保持不变，但图像同样调整大小以适合单元格。我正在创建一个部分响应的网站，其最小宽度为960px，最大宽度为1070px，这就是图像需要调整大小的原因。

问题是：表格中的最后一张图片没有在IE＆amp; Firefox浏览器。它在Chrome中运行良好。

这是我的代码：http://jsfiddle.net/hF5qY/

任何人都有想法或更好的方法来使用divs吗？

Answer 1

<强> DEMO

似乎TD上的％宽度将解决您的问题

<强> CSS

#container td {
    width: 24%;
}

Answer 2

我会在选择响应式设计时为您提供一些可能有用的提示。

在这种情况下，您可以将图像包装在li中，将li设置为23-24％左右。然后，您将img保留为100％宽度和高度：auto。其余的百分比将用于“间隔单元格”。你提到过。

尝试这样的事情：

ul {
    max-width:1070px;
    max-width:960px;
}

li {
   width:23%;
   margin-right:2.66%

}
li:last-child {
   margin-right:0;

}
img {
   width:100%;
   height:auto;
}

希望有所帮助：）

Answer 3

我已经尝试过你想要的DIVS了......除了跨度......它与IE8一起工作....

这是我的HTML

<div id="container">
            <div id="innercont">
                <div id="cont1" class="cont">
                    <a href="samen-doen.html"><img src="http://i.imgur.com/frRYKmV.jpg" alt="Samen doen" width="100%" height="100%"/></a>
                </div>
                <div id="cont2" class="cont">
               <a href="samen-veilig.html"><img src="http://i.imgur.com/IgpVrBz.jpg" alt="Samen veilig" width="100%" height="100%"/></a>

                </div>
                <div id="cont3" class="cont">
                <a href="samen-gezond.html"><img src="http://i.imgur.com/TdUU0zZ.jpg" alt="Samen gezond" width="100%" height="100%"/></a>

                </div>
                <div id="cont4" class="cont">
                <a href="communiceren.html"><img src="http://i.imgur.com/KxVqQVu.jpg" alt="Communiceren" width="100%" height="100%"/></a>

                </div>
            </div>
</div>

这是我的css ....

    #container {
    max-width: 1050px;
    min-width: 640px;
}
#innercont{
    width: 100%;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
}
.cont{
    width: 24%;
    height: 100%;
    margin-right: 5%;
    z-index: 10;
}
#cont1{
    position: absolute;
    top: 0;
    left: 0;
}
#cont2{
    position: absolute;
    top: 0;
    left: 25%;
}
#cont3{
    position: absolute;
    top: 0;
    left: 50%;
}
#cont4{
    position: absolute;
    top: 0;
    left: 75%;
}

这是一个小提琴Fiddle希望它有所帮助

Answer 4

这里是我如何用div做的，这是我认为最好的选择：http://jsfiddle.net/hF5qY/10/embedded/result/

不要介意#container此布局适应网站的任何位置。请确保您只有4个图片项，否则您需要调整.cell宽度。

希望这会有所帮助

表中的右图没有调整大小

4 个答案: