我正在尝试为简单的主页编写代码。
一个有sub1,sub2
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0;
padding: 0;
border: 0;
width : 100%;
height: 100%;
}
.main_wrap {
position: relative;
width: 100%;
height: 100%;
}
.sub1 {
display: inline-block;
float: left;
width: 49%;
height: 100%;
background-color: #0a4e85;
text-align: center;
display: table;
border: 5px solid white;
}
.sub2 {
display: inline-block;
float: left;
width: 50%;
height: 100%;
background-color: white;
text-align: center;
display: table;
border: 5px solid #0a4e85;
}
.main_title1, .main_title2{
color : white;
text-align: center;
line-height: 1.55;
white-space: nowrap;
font-size: 70px;
display: table-cell;
vertical-align: middle;
font-weight: 500;
text-decoration: none;
} <html>
<head>
<title>Main</title>
</head>
<body>
<div class="main_wrap">
<div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
<div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
</div>
</body>
</html>菜单。每个 div 垂直划分窗口。
但是当我减小窗口宽度大小时，sub2 的第二个 div 低于 sub1。
我想让 sub1,sub2 保持一致。 我能做些什么来修复它？
谢谢!!
最佳答案
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0;
padding: 0;
border: 0;
width : 100%;
height: 100%;
}
.main_wrap {
position: relative;
display: flex;
width: 100%;
height: 100%;
}
.sub1 {
display: inline-block;
float: left;
width: 49%;
height: 100%;
background-color: #0a4e85;
text-align: center;
display: table;
border: 5px solid white;
}
.sub2 {
display: inline-block;
float: left;
width: 50%;
height: 100%;
background-color: white;
text-align: center;
display: table;
border: 5px solid #0a4e85;
}
.main_title1, .main_title2{
color : white;
text-align: center;
line-height: 1.55;
white-space: nowrap;
font-size: 70px;
display: table-cell;
vertical-align: middle;
font-weight: 500;
text-decoration: none;
} <html>
<head>
<title>Main</title>
</head>
<body>
<div class="main_wrap">
<div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
<div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
</div>
</body>
</html>你刚刚添加了 display: flex;在 main_wrap 类中。
关于html - 我怎样才能使我的代码响应调整页面大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53863863/