1

我正在努力实现以下结果。我想构建一个响应式布局，我可以在一行上显示一些固定宽度和高度的 DIV（一种框或图块），当浏览器调整大小时，这些 DIV 会落在下面的行上。“图块”组应始终在浏览器窗口中居中，但单个图块应在放置在下一行时左对齐。布局应兼容 IE6 及以上版本。

我的主要问题是 IE 6 和 7（不知道 8），因为我知道 IE6+ 不支持.container包含磁贴组的 DIV ( ) 。display: table我知道 .HTC 文件有一种解决方法，但我很确定有更好的解决方案。如果需要，我不担心使用 JQuery 或纯 CSS。

响应式布局

media queries我根据.container浏览器大小设置宽度

@media (min-width: 1110px) {
    .container{
        width: 1100px;
    }
}

这有效，但在 IE 中无效

.container {
    display:table;
    margin-left:auto;
    margin-right:auto;
}

.box {
   float: left;
   background: #CECECE;
   height: 200px;
   width: 150px;
   margin: 5px;
}

我也想在移动设备上使用相同的布局，这样当设备旋转时，“瓷砖”也会相应移动。

4

1 回答 1

1

这不是你所要求的，但它很接近，并且在 IE6 中工作（并且看起来更好，恕我直言）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.wrap {width: 80%; margin: 0 auto; overflow: hidden;}

.col1 {width: 49.5%; float: left;}

.col2 {width: 49.5%; float: right;}

.col1 div, .col2 div {width: 150px; height: 200px; background: #ccc;}

.col1 div {float: right; margin: 0 0 2% 2%;}

.col2 div {float: left; margin: 0 2% 2% 0;}

</style>

</head>
<body>

<div class="wrap">
    <div class="col1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="col2">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>
于 2013-05-09T09:45:37.863 回答