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位置錯位

回答

相關問題