我使用流体设计构建了一个非常基本的网站,因此在确定div的宽度时使用百分比代替像素值。如何使浏览器/屏幕调整大小时移动div
当我调整浏览器的大小或屏幕大小发生变化时,div不会移动,它们只是调整到浏览器的形状......所以在浏览器更改大小时有效,我希望row1位于顶部,然后col1在自己的行,然后col2在它的行等etc等,我已经用尽了大多数事情,甚至试图从其他人希望他们的div留下来的职位反向工程,倪帮助将是伟大的,因为这是超级恼人的:)
HTML
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<header>
<div class="navbar">
</div>
</header>
<body>
<div class="row1">
</div>
<div class="row2">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
<div class="row3">
<div class="col2">
</div>
<div class="col1">
</div>
</div>
</body>
<footer>
</footer>
CSS
* {
margin:0;
padding:0;
}
.navbar {
position:fixed;
width:100%;
height:75px;
background-color: #c0f4de;
top:0;
left:0;
right:0;
}
.row1 {
margin-top:75px auto;
background-color: #c0f4de;
width:100%;
height:500px;
}
.row2 {
width:100%;
height:500px;
}
.col1{
width:50%;
height:500px;
background-color: #ffffff;
float:left;
}
.col2 {
width:50%;
height:500px;
background-color: #eeeeee;
float: left;
}
您的HTML无效。 'DOCTYPE'声明缺少'!'。 “”和“
这会对此问题起作用吗? – DCWD
@DCWD它不会但Xufox是正确的,它可以帮助你成为更好的Web开发人员。纠正错误意味着很多。干杯! – 2016-07-25 05:04:03