灵活或居中的页面HTML CSS

-1

我必须使用灵活或居中的页面设计，即使对于800 * 600的用户屏幕分辨率也可以工作。当我缩小页面时，元素正在移动并改变其位置。灵活或居中的页面是否正常？如果不是应该如何？灵活或居中的页面HTML CSS

页面的CSS代码;

body { 
      margin-left: auto; 
      margin-right: auto; 
      text-align:center;} 

div.header { 
    padding-top: 1pc; 
    text-align:center; 
    width:100%; 
    color: #000000;} 

div.header h1 { 
color: #493831; 
padding-bottom: 30px; 
margin: 0;} 

div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%; 
    text-align:center; 
    background:#FBB117;} 
div.menu ul{ 
    font-size:14px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    width: 100px 
    padding:0; 
    display:inline-block;} 
div.menu li{ 
    display:inline; } 
div.menu li a{ 
    text-decoration:none; 
    padding:7px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff;} 
div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 


div.sidebar { 
    padding-top: 2pc; 
    margin-right: 15%; 
    margin-left: 15px; 
    text-align:center; 
    float: right; 
    width: 200px; 
    color: #000000; 
    list-style:none; } 
div.sidebar ul{ 
    font-size:14px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    padding:0; 
    list-style: none; 
    display:inline-block; } 
div.sidebar li{ 
    display:inline; } 
div.sidebar li a{ 
    text-decoration:none; 
    padding:10px 0; 
    width:100%; 
    background:#FBB117; 
    color:#4C4646; 
    float:right; 
    text-align:center; 
    border-bottom:1px solid #fff;} 
div.sidebar li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

div.content { 
    width:80%; 
    padding-top: 2pc; 
    text-align:left; 
    margin-left: 15%; 
    margin-right: 300px; 
    color: #000000 } 
div.content p { 
font-weight: lighter; 
color: #493831; 
padding-bottom: 30px; 
margin: 0;} 


div img.bw { 
    float:left; 
    margin-right:15px; 
    width:200px; 
    height:200px; } 

div img.map { 
    float:right; 
    margin-right:15px; 
    width:300px; 
    height:100px; } 

div.footer { 
    padding: 100px; 
    text-align:center; 
    height: 100px; 
    color: #000000 }

来源

2012-04-18 user1332075

http://stackoverflow.com/questions/10195852/flexible-centered-page是不是这个相同的问题？ – Ghokun 2012-04-18 06:11:47

你错过了CSS的第一部分，没有提供HTML，而且你的问题还不清楚。元素如何移动？哪些元素？您需要提供[jsFiddle]（http://jsfiddle.net）或其他演示。 – 2012-04-18 06:15:46

有点有点但我不确定一个中心和灵活的页面是如何。我把页面缩小一些，一切都可以改变他们的位置。对于灵活或居中的页面是否正常？谢谢。 – user1332075 2012-04-18 06:16:10