使用 CSS 和 HTML 进行平铺布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11390759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tile layout with CSS and HTML
提问by orschiro
Without relying on tables, what would be a good solution to accomplish a tile layout such as this: 
that automatically adapts to the screen size of the user. That is, the whole screen should be filled by the tiles, regardless of the with and height of the resolution.
在不依赖表格的情况下，完成这样的平铺布局是一个很好的解决方案：自动适应用户的屏幕尺寸。也就是说，无论分辨率的大小和高度如何，整个屏幕都应该被瓷砖填满。
I appreciate any ideas.
我很欣赏任何想法。
~ Robert
~ 罗伯特
采纳答案by Marian Ban
Here is a working example: jsfiddle
这是一个工作示例： jsfiddle
Html:
网址：
<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>?
CSS:
CSS：
html, body, .container
{
height: 100%;
min-height: 100%;
}
.first {
float: left;
width: 20%;
height: 30%;
background-color: red;
}
.second{
float: left;
width: 20%;
height: 70%;
background-color: green;
}
.third{
float: right;
width: 80%;
height: 80%;
background-color: blue;
}
.fourth {
float: right;
width: 40%;
height: 20%;
background-color: #DDDDDD;
}
.last{
float: right;
width: 40%;
height: 20%;
background-color: yellow;
}
?
?
回答by Py.
I would go with some divusing absolute positionning. And specify for each tile the width/height/top/left using %unit.
我会和一些div使用绝对定位一起去。并使用单位为每个图块指定宽度/高度/顶部/左侧%。
回答by DonCallisto
Hint:
暗示：
- Use a "content div" with 100% of width and height
- Use into the "content div" two divs: one for the left column and one for the right one. Remember to give those "%" dimension (to "content" div also)
- Remember that a floated right div have to come BEFOREa left floated div
- 使用宽度和高度为 100% 的“内容 div”
- 在“内容 div”中使用两个 div：一个用于左列，一个用于右列。记得给那些“%”维度（也给“内容”div）
- 请记住，浮动的右侧 div 必须在左侧浮动的 div之前出现
With this three point, you should be able to try yourself.
有了这三点，你应该可以自己试试了。
回答by Eric Harms
Disclaimer
免责声明
This will not mean the needs of your project. That has been answered alread by other uses.
这并不意味着您的项目需要。其他用途已经回答了这个问题。
For future reference, I would look into an oocss-approach to layout classes. You may have pages that have a different amount of tiles, etc. I use the following for my projects.
为了将来参考，我将研究布局类的 oocss 方法。您的页面可能具有不同数量的图块等。我在我的项目中使用以下内容。
Tiles Object
瓷砖对象
Used for creating tile layouts.
用于创建平铺布局。
css
css
.tiles
{
display: block;
}
.tiles__item
{
display: block;
height: auto;
float:left;
}
.tiles--2
{
margin-left: -4%;
}
.tiles--3
{
margin-left: -2%;
}
.tiles--4
{
margin-left: -2%;
}
.tiles--2 .tiles__item
{
margin-left: 4%;
width: 46%;
}
.tiles--3 .tiles__item
{
margin-left: 2%;
width: 31.3%;
}
.tiles--4 .tiles__item
{
margin-left: 2%;
width: 23%;
}
html
html
<div class="tiles tiles--2">
<div class="tiles__item">
</div>
<div class="tiles__item">
</div>
</div>
Dock Object
停靠对象
Docks content to the edge of the screen.
将内容停靠在屏幕边缘。
css
css
.dock
{
position: absolute;
height: auto;
width: auto;
}
.dock--t
{
width: 100%;
top: 0;
}
.dock--b
{
width: 100%;
bottom: 0;
}
.dock--l
{
height: 100%;
left: 0;
}
.dock--r
{
height: 100%;
right: 0;
}
html
html
<div class="dock dock--t">
The content will be docked to the top of the screen.
</div?
Other Ones
其他的
I would look at the Tiles object in the Metro UI Framework. They allow for heights
我会查看 Metro UI 框架中的 Tiles 对象。它们允许高度
If you are looking for a good layout system that uses proportions:
如果您正在寻找使用比例的良好布局系统：
