我正在使用 this code 构建网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #dcf0f9;
direction : rtl;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.tile_1_1 {
width: 120px;
height: 120px;
}
.tile_2_1 {
width: 248px;
height: 120px;
}
.tile_2_2 {
width: 248px;
height: 248px;
}
.tile_1_2 {
width: 120px;
height: 248px;
}
.tile_4_3 {
width: 504px;
height: 376px;
}
.tile {
float: right;
margin: 4px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.bottom {
margin-bottom: 0;
}
.bottom_left {
margin: 4px 4px 0 0;
}
.bottom_right {
margin: 4px 0 0 4px;
}
.bottom_left_right {
margin: 4px 0 0 0;
}
.top {
margin-top: 0;
}
.top_left {
margin: 0 4px 4px 0;
}
.top_right {
margin: 0 0 4px 4px;
}
.top_left_right {
margin: 0 0 4px 0;
}
.left {
margin-left: 0;
}
.right {
margin-right: 0;
}
.left_right {
margin: 4px 0 4px 0;
}
.column_4 {
width: 504px;
float: right;
}
.column_2 {
width: 248px;
float: right;
}
.column_left {
margin: 0 4px 0 0;
}
.column_midde {
margin: 0 4px 0 4px;
}
.column_right {
margin: 0 0 0 4px;
}
.backToOrigin {
margin-top: -120px;
}
#container {
margin-top: 150px;
width: 3000px;
}
#sectionA {
float: right;
width: 1016px;
}
#sectionB {
float: right;
width: 504px;
margin-right: 112px;
}
#slideShow {
background-color: #aaa;
}
.typeB {
background-color: #21b044;
}
.typeA {
background-color: #1f65c5;
}
.typeC {
background-color: #21b1e5;
}
.redBox {
background-color: #fd3f1b;
}
.yellowBox {
background-color: #fdbe21;
}
.greyBox {
background-color: #5a5a5a;
}
.greenBox {
background-color: green;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<section id="sectionA">
<div class="column_4 column_right">
<div id="slideShow" class="tile_4_3 tile top_left_right"></div>
<div class="tile_2_1 tile tile bottom_right typeA"></div>
<div class="tile_1_1 tile bottom typeB"></div>
<div class="tile_1_1 tile bottom_left typeA"></div>
</div>
<div class="column_2 column_midde">
<div class="tile_2_1 tile top_left_right typeB"></div>
<div class="tile_1_1 tile right typeA"></div>
<div class="tile_1_1 tile left yellowBox"></div>
<div class="tile_1_1 tile right typeB"></div>
<div class="tile_1_2 tile bottom_left typeA"></div>
<div class="tile_1_1 tile bottom_right redBox backToOrigin"></div>
</div>
<div class="column_2 column_left">
<div class="tile_1_1 tile top_right typeA"></div>
<div class="tile_1_1 tile top_left typeC"></div>
<div class="tile_2_1 tile left_right greyBox"></div>
<div class="tile_2_2 tile bottom_left_right typeC"></div>
</div>
</section>
<section id="sectionB">
<div class="column_2 column_right">
<div class="tile_2_1 tile top_right typeA"></div>
<div class="tile_1_1 tile right typeC"></div>
<div class="tile_1_1 tile left typeA"></div>
<div class="tile_2_2 tile bottom_left_right greenBox"></div>
</div>
<div class="column_2 column_left">
<div class="tile_1_1 tile top_right greenBox"></div>
<div class="tile_1_1 tile top_left yellowBox"></div>
<div class="tile_2_1 tile left_right typeC"></div>
<div class="tile_1_2 tile bottom_right typeA"></div>
<div class="tile_1_1 tile left typeB"></div>
<div class="tile_1_1 tile bottom_left greyBox"></div>
</div>
</section>
</div>
</body>
我使用 float 在页面中放置磁贴
我知道这不是这种设计的最佳方法
我希望这些瓦片在未来是动态的，我的意思是我会添加 JS 来拖放和移动这些瓦片并相互插入以适应这个地方， 另一件事是我想设计这个页面响应，我的意思是调整窗口大小这些瓷砖移动和改变他们的位置和调整大小
我检查了gridster plugin但需要从头开始以获得更多功能
这是我的问题:
有没有更好的 CSS 解决方案而不是使用 float 和不定位？(绝对，相对和......)
(不与以后的JS和上层语句冲突)
支持IE8对我来说很重要
感谢您的帮助，这也是我的第一个 STACKOVERFLOW 问题；)
最佳答案
我创建了类似的东西，我只使用了 float <div>让我们来制作这些积木。参见 my example .它适用于各种浏览器，我希望这对您有所帮助。
编辑:更新示例以显示使用不同大小的 block 时的布局。不过，该示例仅使用 1 <div>标记为目标。
关于javascript - 设计 Metro 风格网站的 CSS 和 JS 技巧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14016617/