Question

我正在尝试构建一个具有盒状布局的页面。顶部横幅是底部横幅，两个导航面板（左侧和右侧）以及一些将出现在中间的文本。

现在我想知道你是否可以在不使用表格且没有预定义/硬编码的边距值的情况下创建类似的东西。

这可能吗？

提前致谢

麦克

Answer 1

如果这是你的意思，你可以像这样实现具有页眉和页脚的中央弹性三列布局吗？

使用html：

<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="bottom"></div>

和css：

#top,#bottom{
  width:100%;
  height:70px;
  background:silver;
  clear:both;
}
#middle{
  background:green;
}
#middle,#left,#right{
  height: 200px;
}
#left,#right{
  width: 200px;
  background:skyblue;
}
#left{
  float:left;
}
#right{
  float:right;
}

小提琴：http://jsfiddle.net/hkrVz/

Answer 2

您可以使用div和display:table，display:table-row，display:table-cell构建任何类似于表的结构，并且您不会在标记中滥用表语义。这真的取决于你是否需要支持IE7，因为我认为这些CSS属性只是在IE8中引入（在其他人拥有它们之后的几年）。

如果这将成为一个问题，那么只需环顾四周寻找能够灵活应对所需的选项。我真的不能想到为什么硬编码的边距甚至会成为一个问题，所以也许你需要更详细地解释一下你在尝试什么。

基本的html布局问题

2 个答案: