Question

我正在重新设计我们的网站以使其响应。现在我正在页面的头部工作，它由3个div框组成。他们应该全部＆＃34;收缩＆＃34;根据屏幕尺寸，相同的速率。然而，最后一个不这样做。它也没有填满其高度的100％。怎么会？我的错是什么？

滑块中的图片是随机的！

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&amp;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;
}

Answer 1

您正在使用表格和表格在响应式布局中创建问题

在div中制作右侧部分的内容你可以使用最后一个div下每次潜水的50％，50％

看到我在这里改变了你的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&amp;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>

让我看看这是否适合你......

度过愉快的一天

为什么这个响应式网页设计不起作用？

1 个答案: