我正在努力弄清楚为什么我的内容会溢出而且我的div不能很好地播放。 (所有人都坐在应该的位置。) 这是我目前所拥有的链接。我会继续尝试。但任何帮助都会受到赞赏。
谢谢, 山姆。
#wrapper {
width: 100%;
height:auto;
background-image: url(images/shattered.png);
background-repeat: repeat;
margin: auto;
}
#header {
width: 95%;
height: 5%;
max-width: 1024px ;
max-height: 768px ;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
#menu {
width: 5%;
height: 80%;
max-width: 1024px ;
max-height: 768px ;
float: left;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
#sidebar {
width: 5% ;
height: 80%;
max-width: 1024px ;
max-height: 768px ;
float: right ;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
#content {
width: 80% ;
height: 80%;
max-width: 1024px ;
max-height: 768px ;
background-color: rgba(215, 239, 255,70);
margin: 0.5% ;
border: 0.5% ridge rgb(255, 232, 124);
padding: 0.5%;
}
#footer {
width: 95% ;
height: 5%;
max-width: 1024px ;
max-height: 768px ;
clear: both;
background-color: rgba(102,204,255,50);
margin: 0.5% ;
border: 0.5% ridge rgb(204,255,204);
padding: 0.5%;
}
答案 0 :(得分:0)
您的内容正在流失,因为您将其设置为太小。例如菜单:
#menu {
width: 5%;
}
我清理了你的布局并设置了更舒适的宽度。你可以在这里看到它。
http://jsfiddle.net/X53vD/10/embedded/result/
您是否正在尝试制作自适应网站?