Question

在我的电脑上，我看起来很完美，它是一个17“

我在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“，但它应该可以在任何分辨率和屏幕上查看。

有关为什么全部颠倒的任何线索？

谢谢

Answer 1

您使用的布局是错误的。不需要为每个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 希望这会对你有所帮助。

Answer 2

嗯，在你的css中，你清楚地编码了所有内容，以便它在屏幕上正确。

特别是您所说的#right_container float:right而不是right:260px会出现问题。

你的css的快速（但不好）解决方案是放float:left代替float:right并定义左边left:1190px的像素数（1190是近似值）

一个更好的解决方案将正确学习css并在之后玩它！

CSS：div位置错位

2 个答案: