当窗口最小化时,所有内容均保持不变,但导航不受影响。
下图是窗口最大化时的图像,上图是窗口最小化的图像。
HTML:
<header>
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<nav>
<div class="navigation">
<a href="home.html">
<div class="box" style="background: rgba(0, 0, 0, 0.4)">
<img src="images/home.png">
<div class="name" style="background: rgba(0, 0, 0, 0.4)">HOME</div>
</div>
</a>
<div class="box">
<img src="images/aboutus.png">
<div class="name">ABOUT US</div>
</div>
<div class="box">
<img src="images/groupcompanies.png">
<div class="name">GROUP OF COMPANIES</div>
</div>
<div class="box">
<img src="images/career.png">
<div class="name">CAREER</div>
</div>
<div class="box">
<img src="images/contactus.png">
<div class="name">CONTACT US</div>
</div>
</div>
</nav>
</div>
</header>
CSS:
body {
background-image:url(images/pattern.png);
min-width: 775px;
overflow:auto;
}
@font-face {
font-family:"myfont";
src:url(font/PTN57F.woff);
}
.header {
max-width:1200px;
min-width:200px;
height:170px;
margin:0 auto;
margin-top:10px;
background-color:rgba(0, 0, 0, 0.5);
border-radius:3px;
}
.logo {
width:230px;
}
.logo img {
margin-left:20px;
margin-top:31px;
border-right:solid #FFF 1px;
padding-right:33px;
height:auto;
width:auto;
float:left;
}
.navigation {
width:800px;
height:100px;
margin-left:256px;
float:none;
}
.box {
height:100px;
width:150px;
margin-right:5px;
float:left;
background: rgba(0, 0, 0, 0.2);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
border-radius:2px;
margin-top:31px;
}
.box:hover {
background: rgba(0, 0, 0, 0.4);
-webkit-transition: background 1s;
-o-transition: background 1s;
-moz-transition: background 1s;
}
.name {
height:23px;
width:auto;
text-align:center;
font-family:myfont;
font-size:14px;
color:#FFF;
text-decoration:none;
}
.box img {
float:none;
margin-left:38px;
margin-top:3px;
}
最佳答案
这些框位于div.navigation
内,其左边距为256px
。调整div.header
的大小时,左边距保持不变。如果您想将navigation
放在header
的中间,可以使用
.navigation {
margin-left: auto;
margin-right: auto;
}
这样,它不会溢出标头div并根据总宽度调整左侧边距。
在评论中,如果您希望
header
保持不变,则必须给它一个固定的宽度,例如.header {
width: 1200px;
}
然后,您也不需要
min-width
和max-width
。关于html - 为什么将窗口最小化时DIV放错了位置?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17788586/