如何解决基本的html布局问题
| 我正在尝试构建一个页面,该页面将具有类似框的布局。.顶部横幅,底部横幅,两个导航面板(左右)和一些将出现在中间的文本。 现在,我想知道是否可以在不使用表且没有预定义/硬编码的边距值的情况下创建类似的内容。 那可能吗? 提前致谢 麦克风解决方法
如果这是您的意思,则可以使用页眉和页脚实现集中弹性的三列布局。
使用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/
,您可以使用divs和display:table
,display:table-row
,display:table-cell
构建任何类似表的结构,并且不会滥用标记中的表语义。实际上,这取决于您是否需要支持IE7,因为我认为这些CSS属性仅是在IE8中引入的(其他人拥有它们后的几年)。
如果这将成为问题,那么只需四处寻找具有灵活性的选项即可满足您的需求。我真的不能认为为什么硬编码的边距甚至会成为问题,所以也许您需要更详细地说明您要尝试的内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。