Question

我想知道是否有替代编写css而不是使用css表来制作液体/动态布局。 vinyll真的帮助了我...... simple 3 Column responsive layout

这正是我需要列工作的方式，但是当我使用css表时，我似乎无法用边距和填充来定位内容（我可能可以左右使用但是相对定位会破坏文档流程所以我不想这样做... ...继承人和榜样 http://jsfiddle.net/u5nR2/4/

.container{
width:100%;
height:100%;
display: table;
}
div > div {
  display: table-cell;
}

.three div{margin-top:100px}/*why doesnt this move?*/

Answer 1

在父元素上使用填充。保证金需要另一个元素反弹。

更改

.three div{margin-top:100px}

要

.three { padding-top: 100px; }

另外，将div > div更改为.container > div。我假设您只想选择.container的直接子div。当您使用div > div时，也会选择.one，.two和.three内的div。（还要注意vertical-align: top将文本放在顶部的表格单元格中）

检查updated Fiddle

动态/响应/液体布局css

1 个答案: