0

我的网站在开发http://hrcprojectconsulting.com/下，当在我的分辨率和大小的屏幕上看到时，它看起来很好，否则，水平滚动条会弹出并使浏览烦人。

所以我不知道我到底要做什么。那里有流畅的布局，但它们填满了整个屏幕，这会让所有的东西都伸展开来。但是，如果我使用一些固定的 css，那么问题是根据屏幕大小和分辨率，可能会出现水平滚动条，这一定不会发生。

是的，是的，我已经完成了所有的阅读，事实上我正在学习一个非常好的教程

http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3#null

我理解作者的所作所为，而且看起来很容易，所以我就用我的做了，最简单的一步，它让我失望了，（因为我有另一个布局）

我现在的 HTML （我今天尝试添加页脚，但页脚既不停留在底部，也不被内容推下，而是溢出但那是另一回事）

所以这里是html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
    <head>
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
        <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:1040px;
    margin:0 auto;
}
#header {

    height:50px;
    margin-bottom:20px;
}
#left_content {
    float: left;
    width:180px;

    min-height: 600px;
    margin-right:20px;
}
#middle_content {
    font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
    font-size:8px;
    float: left;
    width:640px;

    min-height: 600px;
    margin-right:0px;
}
#right_content {
    float: right;
    width:180px;
    margin-right:20px;
    min-height: 600px;
}


#footer {

  float: left;

  background: green;

  margin-top: 20px;

  margin-right: 10px;

  margin-left: 10px;

  clear: both;

  width: 1020px;

  height:200px;

}

所以; 跟随作者，我试图开始做的是开始修改最外层的包装容器，更改 1040px；到 96%。

一旦我这样做了，你看到的作为标题的蓝色条缩小到大约 400 像素并漂移到左边，加上你看到所有选项卡和框的网络表单，只是向下漂移到底部，完全不喜欢它自己从其余的，所以一团糟。

怎么来的？为什么我不能开始做作者对他的设计所做的事情？他从 96% 的变化开始。

4

1 回答 1

0

这是因为将 1040px 更改为 96% 会使内部的浮动元素有更多的“空间”来浮动。

如果 96% > 1040px，那么浮动将上升到顶部并彼此相邻。

尝试使所有子元素也基于 %。

于 2012-11-17T18:40:10.940 回答