gpt4 book ai didi

CSS 固定布局导致水平滚动条显示在低分辨率屏幕上

转载 作者:行者123 更新时间:2023-11-28 13:32:10 29 4
gpt4 key购买 nike

我的网站正在开发中 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 像素并向左移动,加上您看到所有选项卡和框的网络表单,只是 naufragated 向下移动到漂浮的按钮,完全不喜欢其他人,所以一团糟。

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

最佳答案

这是因为将 1040px 更改为 96% 可以让 float 元素在更多“空间”内 float 。

如果 96% > 1040px,则 float 将上升到顶部并彼此相邻。

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

关于CSS 固定布局导致水平滚动条显示在低分辨率屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13432799/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com