回答
这里是一个工作示例: 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:
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;
}
你打我9分钟! :-) – 2012-07-09 08:09:15
我也想感谢你的解决方案。为什么你不使用绝对定位,例如上面的例子中的Shaquin? – orschiro 2012-07-09 08:47:24
@orschiro因为这没有必要:) – 2012-07-09 08:53:38
我会去一些div
使用absolute positionning。并使用%
单位为每个瓷砖指定宽度/高度/顶部/左侧。
可能是最简单最好的解决方案。当屏幕空间很小时,它不会很好玩,所以考虑在小屏幕上使用后备。 – Artefact2 2012-07-09 08:00:35
提示:
- 使用“内容格”与宽度和高度
- 使用的100%到“内容格”两个div:一个用于左列,一个用于正确的。记得要给那些“%”尺寸(以“内容” DIV也)
- 请记住,一个浮动的权利DIV一定要来前左侧浮动的div
有了这三点,你应该能够尝试自己。
免责声明
这并不意味着您的项目需要。这已被其他用途所回答。
为了将来的参考,我会考虑一个布局类的oocss方法。你可能有不同数量的瓷砖等网页我用我的项目以下。
瓷砖对象
用于创建瓷砖布局。
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
<div class="tiles tiles--2">
<div class="tiles__item">
</div>
<div class="tiles__item">
</div>
</div>
基座对象
码头内容到屏幕的边缘。
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
<div class="dock dock--t">
The content will be docked to the top of the screen.
</div?
其他的
我想看看在Metro UI的框架的瓷砖对象。它们允许高度
如果您正在寻找使用比例的良好布局系统:
- 1. 错误的瓷砖布局
- 2. 瓷砖基础布局
- 3. 布局与2种类型的瓷砖
- 4. 没有瓷砖的弹簧mvc布局
- 5. 可这箱瓷砖的布局,纯CSS安排?
- 6. Ajax瓷砖流布局网格?
- 7. CSS瓷砖定位
- 8. 使用瓷砖
- 9. 相同的布局,不同的内容使用瓷砖
- 10. SpriteKit和瓷砖 - 使用不是正方形的瓷砖
- 11. 布尔玛的CSS - 划分瓷砖子框在2等宽瓷砖
- 12. 瓷砖系统和瓷砖图
- 13. HTML和CSS布局
- 14. 瓷砖和$ {} pageContext.request.requestURL
- 15. 使用HTML和CSS布局内容
- 16. 地铁瓷砖样式CSS
- 17. CSS瓷砖大小调整
- 18. html5画布缓存瓷砖
- 19. 10用jQuery或CSS定位的瓷砖
- 20. 使用drawRect的Android瓷砖
- 21. 春天和瓷砖 - 包括.html文件
- 22. 菜单使用瓷砖和纯CSS的子图
- 23. AngularJs和Bootstrab瓷砖
- 24. 春季瓷砖和#
- 25. 的OpenLayers,层数:瓷砖与瓷砖单
- 26. 瓷砖游戏上的重复瓷砖
- 27. 瓷砖之间有什么区别:插入和瓷砖:得到瓷砖框架?
- 28. HTML和CSS DIV布局
- 29. Html和css布局问题
- 30. 响应式瓷砖布局只适用于宽度
我的例子是在这里:http://shaquin.tk/experiments/tile html的。 @MajoB显然是在与我同时写他们的例子。 – 2012-07-09 08:14:32
感谢Shaquin。我迄今为止的所有尝试都与桌面布局有关,因为我面临着安排浮动div的问题。我没有注意到浮动权必须在浮动前留下的事实。 – orschiro 2012-07-09 08:44:27