CSS：DIV位置错位

在我的电脑我有完美的寻找，这是一个17"CSS：DIV位置错位

我去看看我正在开发网上www.hrcprojectconsulting.com另一台计算机上，1080在旧屏幕X 600，我认为

和右面板已从其位置错位本身和所采取的中间容器

我设想它作为一个包装的一个主容器，左容器，中心容器和右容器。我定位主容器以margin为中心：0 auto;这一切看起来不错，然后我必须得到横幅，蓝色条纹将看到：

这是我的所有网页的蓝图：

<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" /> 
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script> 




    <div id = "contenedor_principal"> 

    main wrapper 
    <div id = "left_container"> 
    content for left panel 
    </div> 


    <div id="container-center"><!-- 1 -->

内容为中心面板

 </div> <!-- end of container center 1 --> 

    <div id = "right_container"> 

    and for the right panel 
    </div> 
    </div>

，这是头：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head profile="http://gmpg.org/xfn/11"> 
    <link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />   
    <link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" /> 
    <script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script> 



</head> 

<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> 


<body>

这是CSS：

#contenedor_principal 
{ 

    background:orange; 
    width:1040px; 
    margin: 0 auto; 

} 



    div.panel,p.flip 
{ 
margin:0px; 
padding:5px; 
text-align:center; 
background:#FFFFFF; 

} 

#container-center{ 

    width:635px; /*** Set to = center col width ***/ 
    height:500px; 

    font-size:8px; 
    display:inline; 
    position:absolute; 
    left:485px; 
    top:80px; 

/* \*/ 
    margin-left:-1px; 
/* Hidden from IE-mac */ 
} 


#left_container{ 
    width:200px; /*** Set to = center col width ***/ 

    height:500px; 
    float:right; 
    margin-right:0px; 
    font-size:8px; 
    display:inline; 
    position:absolute; 
    left:275px; 
    top:80px; 

/* \*/ 
    margin-left:-1px; 
/* Hidden from IE-mac */ 
} 

#right_container{ 
    width:202px; /*** Set to = center col width ***/ 
    margin-left:0px; 
    height:600px; 
    float:right; 
    font-size:8px; 
    display:inline; 
    position:absolute; 
    right:260px; 
    background:url('../assets/uploads/miweb/bg_body.png'); 
     background-repeat:repeat-x; 
    top:80px; 

/* \*/ 
    margin-left:-1px; 
/* Hidden from IE-mac */ 

} 



#header { 

    float:inherit; 
    background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0; 
    font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif; 
    font-size: 10px; 
    margin: 0 auto; 
    margin-top: 2px; 
    padding: 0; 
    width: 1050px; 
    height:75px; 
    h2 {color:#ffffff;} 


}

反正可以像我说的那样在我的网上直播。我使用1660 X 900和17" ，但它应该是在任何分辨率和屏幕观看。

任何线索，为什么它去所有的倒挂？

谢谢

来源

2012-11-16 user1815822

live link？为什么你的头部在身体外？ –

因为我做错了 – user1815822

您使用的布局是错误的。无需为每个div使用position: absolute，然后设置顶部和左侧。

而不是按照下面的结构。

HTML

<html> 
    <head> 
     <title>Website</title> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header"></div> 
      <div id="content"> 
       <div id="left_content"></div> 
       <div id="middle_content"></div> 
       <div id="right_content"></div> 
      </div> 
     </div> 
    </body> 
</html>

CSS

#container { 
    width:960px; 
    margin:0 auto; 
} 
#header { 
    background: blue; 
    height:50px; 
    margin-bottom:20px; 
} 
#left_content { 
    float: left; 
    width:150px; 
    background: red; 
    min-height: 600px; 
    margin-right:20px; 
} 
#middle_content { 
    float: left; 
    width:620px; 
    background: green; 
    min-height: 600px; 
    margin-right:20px; 
} 
#right_content { 
    float: right; 
    width:150px; 
    background: red; 
    min-height: 600px; 
}

Live Demo 希望这会帮助你。

来源

2012-11-16 11:34:04 Libin

非常感谢，上帝保佑你ॉू – user1815822

那么，在你的CSS为了它正确只有来到你的屏幕上，你清楚编码的一切。

特别是正在发生的事情是不对您#right_container中，你说float:right比right:260px。

一个快速（但坏）解决方案，以你的CSS将是把float:left，而不是float:right并从左侧left:1190px（1190近似）定义的像素数

一个更好的解决办法是正确学习css并在之后使用它！

来源

2012-11-16 11:22:11 leMoisela

我明白了。首先，因为你的中间容器有一个固定的'width'，所以你不能在右边的容器上使用'float：right'，因为你不知道离右边界有多远，容器。 – leMoisela

我明白了，那我可以把它放在一个灵活的宽度上吗？这是怎么回事？ – user1815822

CSS：DIV位置错位

回答

相关问题