0
我对HTML相当陌生，对于一个小型项目我们应该模仿google邮件的界面。没有工作链接，只是界面。我在那里安静，但我有一些问题。 我的问题是，当我缩小浏览器时，布局扭曲。我在互联网上搜索（w3schools等），但没有答案。任何人都可以帮忙吗？这是我的代码。布局扭曲HTML
#headerbar {
background-color: grey;
color: black;
text-align: center;
padding: 5px;
height: 60px;
border-style: solid;
white-space: nowrap;
}
#secondbar {
background-color: LightGrey;
color: black;
text-align: center;
padding: 10px;
white-space: nowrap;
border-style: solid;
}
#logo{
font-size: 200%;
float: left;
color:red;
}
#logoMail{
float: left;
font-size: 200%;
color: red;
}
#checkbox{
float: left;
}
#refresh{
float: center;
}
#properties{
float: right;
white-space: nowrap;
}
#more{
float: center;
}
#nav{
line-height: 30px;
background-color: white;
color: black;
height: 300px;
width: 200px;
float: left;
padding: 5px;
white-space: nowrap;
border-style: solid;
border-width: 1px;
}
#footer{
background-color: black;
color:white;
clear:both;
text-align: center;
padding: 5px;
white-space: nowrap;
}
#logopic {
float: left;
}
#email{
font-size: 100%;
float: right;
}
#box{
float:right;
white-space: nowrap;
}
#maillist{
line-height: 30px;
background-color: white;
color: black;
max-width: 100%;
text-align: center;
padding: 5px;
float: center;
white-space: nowrap;
border-style: solid;
}
#name{
line-height: 30px;
background-color:Grey;
float:left;
padding: 5px;
width:10%;
white-space: nowrap;
}
#mailpreview{
display: inline-block;
line-height: 30px;
background-color:LightGrey;
padding: 5px;
margin: 0 auto;
width: 50%;
white-space: nowrap;
}
#time{
line-height: 30px;
background-color:Grey;
float:right;
padding: 5px;
width: 10%;
white-space: nowrap;
}
#leftblock{
float:left;
}
#center{
float: center;
}
#rightblock{
float: right;
}<div id= "headerbar">
<img id="logopic" src="logo.png" >
<span id="logo">Google Mail</span>
<input type="text" name="searchbar">
<span id = "box"><img src="box.png"></span>
<span id="email">[email protected]</span>
</div>
<div id = "secondbar">
<div = "leftblock">
<span id="logoMail">Mail</span>
<img id="checkbox" src="checkbox.png">
</div>
<div id="centerblock"> \t
<img id="refresh" src="refresh.png">
<img id="more" src="more.png">
</div>
<div id="rightblock">
<img id="properties" src="properties.png">
</div>
</div>
<div id = "nav">
Inbox<br>
Starred<br>
Important<br>
Sent Mail<br>
Drafts<br>
Follow up<br>
Misc<br>
Priority<br>
</div>
<div id="maillist">
<div id="name">
1<br>
2<br>
3<br>
</div>
<div id="mailpreview">
This is mail number 1<br>
This is mail number 2<br>
This is mail number 3<br>
</div>
<div id="time">
20:00<br>
20:01<br>
20:02<br>
</div>
</div>
<div id="footer">
Powered by Google
</div>