Question

我在“响应式布局”页面上设置了几个div。

ISSUE：

当页面按比例缩小时，其中一个'子'div（'标题'）正在下降（4px）低于它的设定边距（底部：0;）。

这是页面代码，包括CSS：

    <!DOCTYPE html>
    <html>
    <head>

    <meta name="" content="text/html; charset=utf-8, width=device-width, initial-scale=1, minimum-scale=1" http-equiv="Content-Type" />

    <title>Page Title</title>

    <style>

    body {margin: 0; }

    .fixed-ratio-resize {
        max-width: 100%; 
        height: auto; 
        width: auto\9;
    }

    .storyWrapper {
        position: relative; 
        max-width: 800px; 
        max-height: 450px;
        border:none;
    }

    .leftBtn {
        z-index: 100; 
        position: absolute; 
        width:4%; 
        min-height:30px; 
        padding-left:6px; 
        background: rgba(0, 0, 0, 0.2); 
        bottom:50%;
    }

    .leftBtn a{
        float: left; 
        font-family: Arial; 
        line-height:30px; 
        vertical-align:middle; 
        font-size:30px; 
        font-weight:bold; 
        color:white; 
        text-decoration:none;
    }

    .rightBtn {
        z-index: 100; 
        position: absolute; 
        width:4%; 
        min-height: 30px; 
        padding-right: 6px; 
        background: rgba(0, 0, 0, 0.2); 
        margin-left: 95.1%; 
        bottom: 50%;
    }

    .rightBtn a{
        float: right; 
        font-family: Arial; 
        line-height: 30px; 
        vertical-align: middle; 
        font-size: 30px; 
        font-weight: bold; 
        color: white; 
        text-decoration: none;
    }

    .headline {
        position: absolute; 
        width: 98.5%; 
        background: rgba(0, 0, 0, 0.2); 
        padding: 0px 6px 0px 6px; 
        bottom: 0px;
     }

    .headline a{ 
        font-family: Arial, Helvetica, sans-serif; 
        line-height: 26px; 
        vertical-align: middle; 
        font-size: 16px; 
        font-weight: bold; 
        color: white; 
        text-decoration: none;
    }

    </style>

    </head>

    <body>

    <div id="story1" class="storyWrapper">
    <a href="#"><img class="fixed-ratio-resize" 
    src="CarouselAssets/carouselImages/green.jpg" width="800px" 
    height="450px" alt=""/></a>
    <div class="leftBtn"><a href="#">&#8249;</a></div>
    <div class="rightBtn"><a href="#">&#8250;</a></div>
    <div id="headline" class="headline"><a href="#">THIS IS A REBEL PLANET 
    NEWS HEADLINE FOR THE STORY ABOUT THE COLOR GREEN</a></div>
    </div>

    </body>
    </html>

以下是包含此代码的页面的链接：

http://www.rebelplanetnews.com/responsiveTest.html

当页面缩小时，我需要防止孩子的'标题'div在母亲的'storyWrapper'div之后流下来。

*注意：使用的图像只是绿色jpg图像（w 800 X h 450）

任何建议都表示赞赏。谢谢。

Answer 1

您需要将display: block添加到a元素（.fixed-ratio-resize类的父级）。由于这是a元素，因此将显示inline。您必须更改为block元素。

您还可以应用display: block整个.fixed-ratio-resize类来处理浏览器支持并能够点击整个图像。

在响应式设计中除了设定保证金之外的分歧

1 个答案: