不依赖表格，完成瓷砖布局的好方法是： tile layout ，它可以自动适应用户的屏幕尺寸。也就是说，无论分辨率的高度和高度如何，整个屏幕都应该由瓷砖填充。使用CSS和HTML的瓷砖布局

我很欣赏任何想法。

〜罗伯特

2012-07-09 orschiro

我的例子是在这里：http://shaquin.tk/experiments/tile html的。 @MajoB显然是在与我同时写他们的例子。 – 2012-07-09 08:14:32

感谢Shaquin。我迄今为止的所有尝试都与桌面布局有关，因为我面临着安排浮动div的问题。我没有注意到浮动权必须在浮动前留下的事实。 – orschiro 2012-07-09 08:44:27

这里是一个工作示例： 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; 
}

来源

2012-07-09 07:58:21

你打我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。并使用%单位为每个瓷砖指定宽度/高度/顶部/左侧。

来源

2012-07-09 07:44:32

可能是最简单最好的解决方案。当屏幕空间很小时，它不会很好玩，所以考虑在小屏幕上使用后备。 – Artefact2 2012-07-09 08:00:35

提示：

使用“内容格”与宽度和高度
使用的100％到“内容格”两个div：一个用于左列，一个用于正确的。记得要给那些“％”尺寸（以“内容” DIV也）
请记住，一个浮动的权利DIV一定要来前左侧浮动的div

有了这三点，你应该能够尝试自己。

来源

2012-07-09 07:45:36 DonCallisto

免责声明

这并不意味着您的项目需要。这已被其他用途所回答。

为了将来的参考，我会考虑一个布局类的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的框架的瓷砖对象。它们允许高度

http://metroui.org.ua/

如果您正在寻找使用比例的良好布局系统：

https://github.com/stubbornella/oocss/wiki/Grids

来源

2013-05-29 15:09:15

使用CSS和HTML的瓷砖布局

回答

瓷砖对象

基座对象

其他的

相关问题