Question

所以我有一个图像，我需要隐藏div之外的所有内容，我使用溢出的尝试不起作用..还有什么我应该用来隐藏图像之外的内容吗？

CODE：

<!DOCTYPE html>
 <html>
<head>
    <title>banner</title>
    <style type="text/css" media="screen">
    #container {
        width:600px;
    }
    #image{
        display: block;
        width: 300px;
        height: 250px;
        overflow: none;
        float:left;
        position: relative;
    }
    h1{
        color: #aaba38;
        font-size: 26px;
        font-weight: bold;

    }
    #slide{
        position: relative;
        -webkit-animation: mymove 6s infinite; /* Chrome, Safari, Opera */ 
        animation: mymove 6s infinite;  
          -webkit-animation-iteration-count: 1;
           -moz-animation-iteration-count: 1;
             -o-animation-iteration-count: 1;
                animation-iteration-count: 1;
    }

    /* Chrome, Safari, Opera */ 
    @-webkit-keyframes mymove {
        0%   {right: 0px;}
        50%  {right: 210px;}
        100%  {right: 0px;}     
    }
    /* Standard syntax */
    @keyframes mymove {
        0%   {right: 0px;}
        50%  {right: 210px;}
        100%  {right: 0px;}   
    }

    .first, .second, .third{float:left; position: relative; width:200px; text-align:right;}
    .second{padding-bottom:20px;}
    </style>
</head>
<body>
    <div id="container">
        <div id="image">
            <img src="html-5-1.jpg" alt="image_1" width="300" height="250" style="display: block; float:left;" />
        </div>
        <div id="slide">
            <div class="first">
                <h1>Mailigen</h1>
            </div>
            <div class="second">
                <span style="color: #aaba38; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold; padding-left: 75px; text-align: right;">REACH <br/> THE PINNACLE</span>
            </div>
            <div class="third"
                <span style="color: #2f1e16; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold;">of business</span><br/>
                <span style="color: #2f1e16; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold;">with Mailigen</span><br/>
                <span style="color: #2f1e16; text-transform:uppercase; font-size: 19px; line-height: 1.5; font-weight: bold;">email marketing</span><br/>
            </div>
            </span>
        </div>
    </div>
</body>

Answer 1

严重的是，没有这样的css属性overflow:none;，而是尝试使用可能有效的overflow:hidden。有关更多参考，请查看此内容。它might help。

对您的**MARKUP**和**STYLE**

进行了一些更改

.content{
    width:300px;
    height:250px;
    overflow:hidden;
    position:relative;
}

希望这将 help 。

溢出不会隐藏内容

1 个答案: