Question

我正在努力实现以下结果。我想构建一个响应式布局，我可以在一行中显示一些DIV（一种盒子或方块）固定宽度和高度，当浏览器调整大小时，它会落在下面的行上。 'tiles'组应该始终在浏览器窗口中居中，但是当放在下面的行上时，单个tile应该对齐到左边。 布局应与IE6及更高版本兼容。

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

Responsive layout

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

我也希望在移动设备上使用相同的布局，以便在旋转设备时，“贴片”会相应移动。

Answer 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>

具有水平居中固定宽度和高度DIV的响应式布局

1 个答案: