我正在重新设计我们的网站，使其响应迅速。现在我在页面的头部工作，它由 3 个 div 框组成。根据屏幕尺寸，它们都应该以相同的速率“收缩”。但是最后一个不这样做。它也不会填满其高度的 100%。怎么会？我的错误是什么？
slider 中的图片是随机的!
HTML
<header class="header2">
<header class="second">
<div class="top_slider">
<div id="slider" class="aslider" data-duration="10" data-hide-controls>
<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
</div>
<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
</div>
<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
</div>
<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
</div>
</div>
</div>
<div class="logo">
<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
</div>
<div class="right">
<table width="100%" height="100px">
<tr>
<td>
<ul style="float:left;">
<li><a href="http://www.s4ea.org/images/docs&maps/S4EA REGISTRATION FORM-ANNUAL.doc" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/athlete_registration.gif" name="register" border="0" id="register" onLoad="" style="padding-bottom:0%;"></a></li>
<li><a href="http://www.s4ea.org/images/docs&maps/S4EA REGISTRATION FORM-ANNUAL.doc" target="_parent"><img src="http://www.s4ea.org/images/navigation/athlete_registration.gif" name="register" border="0" id="register" onLoad="" style="padding-bottom:0%;"></a></li>
</ul>
</td>
<td>
<ul style="float:right;">
<li><a href="http://www.s4ea.org/images/docs&maps/S4EA%20VOLUNTEER%20REGISTRATION%20PACKET.pdf" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/volunteer_coach.gif" name="subscribe" border="0" id="subscribe" onLoad="" style="padding-bottom:0%;"></a></li>
<li><a href="form.php" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/volunteer_form.gif" name="volunteer_form" border="0" id="volunteer_form" onLoad=""></a></li>
</ul>
</td>
</tr>
</table>
</div>
</ul>
</header>
</header>
CSS
.second .top_slider {
width:40%;
background-color: #FFF;
float:left;
}
.second .top_slider .aslide {
display: none;
}
.second .top_slider .aslide img {
max-width: 100%;
height:auto;
}
.second .top_slider #slider {
width: 100%;
height: 600px;
}
.second .top_slider .aslide .text {
width: 200px;
margin: 0 auto;
color: #f8f8f8;
text-shadow: 0 0 2px #000;
font-weight: bold;
font-size: 36px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30px;
font-family: sans-serif;
}
.second .logo {
width: 26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
}
.second .right {
width:26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
overflow:hidden;
font-size:1em;
height:200px;
}
.second .right img {
max-width:80%;
margin:0px 0px 0px 0px;
padding-top:5%;
}
.second .right ul li{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul {
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul li img{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 20%;
padding-top:5%;
width:auto;
}
最佳答案
您正在使用表格，并且表格在响应式布局中创建问题
在div中制作右侧部分的内容 你可以使用 50% , 50% 用于最后一个 div 下的每次潜水
看到这里我已经改变了你的CSS
课后删除所有课(.second .right img)并替换为这个
.second .right img {
max-width:95%;
margin:0px 0px 0px 0px;
padding-top:5%;
height: 45%;
width:100%;
}
并用这个(右边的 div)更改最后一列代码
<div class="right">
<div style="width:50%; float:left; height:200px;">
<a href="http://www.s4ea.org/images/docs&maps/S4EA REGISTRATION FORM-ANNUAL.doc" target="_parent" onMouseOut="MM_swapImgRestore()">
<img src="http://www.s4ea.org/images/navigation/athlete_registration.gif" name="register" border="0" id="register" onLoad="" style="padding-bottom:0%;"></a>
<a href="http://www.s4ea.org/images/docs&maps/S4EA REGISTRATION FORM-ANNUAL.doc" target="_parent"><img src="http://www.s4ea.org/images/navigation/athlete_registration.gif" name="register" border="0" id="register" onLoad="" style="padding-bottom:0%;"></a>
</div>
<div style="width:50%; float:left; height:200px;">
<a href="http://www.s4ea.org/images/docs&maps/S4EA%20VOLUNTEER%20REGISTRATION%20PACKET.pdf" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/volunteer_coach.gif" name="subscribe" border="0" id="subscribe" onLoad="" style="padding-bottom:0%;"></a>
<a href="form.php" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/volunteer_form.gif" name="volunteer_form" border="0" id="volunteer_form" onLoad=""></a>
</div>
<div style="clear:both;"></div>
</div>
让我看看这对你有用吗......
祝你有个愉快的一天
关于jquery - 为什么这个响应式网页设计不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23286121/