在创建流畅格式时遇到问题。

时间:2013-04-24 04:55:32

标签: html css formatting fluid-layout liquid-layout

我正在努力弄清楚为什么我的内容会溢出而且我的div不能很好地播放。 (所有人都坐在应该的位置。) 这是我目前所拥有的链接。我会继续尝试。但任何帮助都会受到赞赏。

http://jsfiddle.net/X53vD/

谢谢, 山姆。

    #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%;
    }  

1 个答案:

答案 0 :(得分:0)

您的内容正在流失,因为您将其设置为太小。例如菜单:

#menu {
    width: 5%;
}

我清理了你的布局并设置了更舒适的宽​​度。你可以在这里看到它。

http://jsfiddle.net/X53vD/10/embedded/result/

您是否正在尝试制作自适应网站?