网页布局的CSS参数

标签 css layout

我真的是制作网页的初学者。我阅读了大量教程,我认为我取得了相当大的进步。但我被困在一个简单的问题上。我想用这种布局制作一个简单的网页: http://i49.tinypic.com/1r54l4.jpg

我有一个有背景的 body 。我希望此背景在 png Logo 的上方和下方可见。然后我在左侧有带有相同颜色背景的菜单的 Canvas 。然后页脚又留了一点边距。代码如下所示:

body {
margin: 0;
padding-top: 10px;
background-image: url('pics/background.png');
background-repeat: repeat; 
}

#wrapper {
width:1200px;
height:100%;
margin-left:12%;
}

#content {
background: rgba(255, 251, 208, 0.9);
height:100%;
margin-top:10px;
}

#menu {
width:16%;
float:left;
}

#canvas {
width:84%;
float:right;
}

这样我就得到了没有背景颜色的网页。例如,Firebug 显示包装器或内容的高度刚好在 Canvas 上方结束。 我尝试了数十种不同的设置,但每次都有问题。

最佳答案

我认为包装器上需要一个 clearfix 类 ( http://css-tricks.com/snippets/css/clear-fix/ ),据我所知,所有包装器内部元素都是 float 的

关于网页布局的CSS参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14532672/

相关文章:

java - 无换行符和/或垂直方向的 FlowLayout

javascript - jQuery 单击/切换显示/隐藏 div 面板

html - 为什么我的 "float: left;"不起作用?

css - 父项为 flex 元素时的 100% 高度 : Chrome bug?

java - JFrame 和 JPanel

android - 在不调用 onCreate 的情况下更改布局

html - 在 CSS3/HTML5 中使用自定义字体?

html - 移动浏览器中的 iframe 宽度超出页面范围

java - 如何在 vaadin 中布局 Dialog 组件?

Android:布局背后的模糊 ListView