0

在我的电脑上，它看起来很完美，它是 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" 但它应该可以在任何分辨率和屏幕上查看。

关于为什么一切颠倒的任何线索？

谢谢你

4

2 回答 2

1

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

而不是遵循以下结构。

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;
}​

现场演示 希望这会对您有所帮助。

于 2012-11-16T11:34:04.320 回答
0

好吧，在您的 css 中，您清楚地编码了所有内容，以便它仅在您的屏幕上正确显示。

特别是出了什么问题是#right_container你说的float:right，而不是right:260px。

一个快速（但不好）的 CSS 解决方案是放置float:left而不是float:right定义左侧的像素数left:1190px（大约为 1190）

更好的解决方案是正确学习 css 并在之后使用它！

于 2012-11-16T11:22:11.297 回答