Div 在响应式设计中超越设定的边距

Question

我在 'responsive layout' 页面上设置了一些 div。

问题：

当页面缩小时，'child' div 之一 ('headline') 在其设置的页边距（底部：0;）下方缩小 (4px)。

这里是页面代码，包括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;
    }

    .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>

这是包含此代码的页面的 link：

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

当页面缩小时，我需要防止子 'headline' div 流过父 'storyWrapper' div。

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

如有任何建议，我们将不胜感激。谢谢。

Answer 1

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

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

Div 在响应式设计中超越设定的边距

Div Bleeding Down Beyond Set Margin In Responsive Design

html

css

margin

scale

responsive-design