Question

HTML

<div class="Slider_2">
<div class="Slider2_warpper">

<div class="Slider2_Content_A"></div><!-- end Silder2_Content_A -->
<div class="Slider2_Content_B"></div><!-- end Silder2_Content_B -->
<div class="Slider2_Content_C"></div><!-- end Silder2_Content_C -->
<div class="Slider2_Content_D"></div><!-- end Silder2_Content_D -->
<div class="Slider2_Content_E">
    <div class="Slider2_Content_E_warpper">
    <h4>Create Art you love</h4>
    <p>Listen to your favorite songs, check out new releases, or play music that takes you back. Whatever you’re doing or feeling, we’ve got the music to make it better.</p>
    </div><!-- end of Slider2_Content_E_warpper -->
</div><!-- end Silder2_Content_E -->
<div class="Slider2_Content_F"></div><!-- end Silder2_Content_F -->

</div><!-- end of Silder2 warpper -->
</div><!-- end of Silder_2 -->

CSS

   .Slider_2{
        width:100%;
        height:100%;
        min-width:1349px;
        min-height:600px;
        max-height:1280px;
    }

    .Slider2_warpper{
        width:100%;
        height:100%;
        margin:auto;
    }

    .Slider2_Content_A{
        float:left;
        width:31%;
        height:100%;
        background-color:#212121;
        /*background: url('img/img1.jpg')100% 0 no-repeat;*/
        background-size:100% 100%;
    }

    .Slider2_Content_B{
        float:left;
        width:23%;
        height:50%;
        background-color:#411132;
        /*background: url('img/img9.jpg')50% 0 no-repeat;*/
        background-size:100% 100%;
    }

    .Slider2_Content_C{
        float:left;
        width:23%;
        height:50%;
        background-color:#543311;
        /*background: url('img/img10.jpg')50% 0% no-repeat;*/
        background-size:100% 100%;
    }

    .Slider2_Content_D{
        float:left;
        width:23%;
        height:50%;
        background-color:#121234;
        /*background: url('img/img8.jpg')50% 50% no-repeat;*/
        background-size:100% 100%;
    }

    .Slider2_Content_E{
        width:44%;
        height:50%;
        position: relative;
        float:left;
        margin:auto;
        background-color:blue;
    }

    .Slider2_Content_E_warpper{
        background-color:red;
        max-width:593.5px;
        max-height:200px;
        margin:auto;
    }

    .Slider2_Content_E h4{
        font-size: 5em;
        text-align: center;
        line-height: 1;
        letter-spacing: -0.06em;
        font-weight: 800;
        color:#2e2f33;
        margin-bottom: 2%;
        margin-top: 10%;
        max-width:593.5px;
        max-height:100px;
    }

    .Slider2_Content_E p{
        font-size: 1em;
        text-align: center;
        line-height: 1;
        letter-spacing: -0.06em;
        font-weight: 800;
        color:#2e2f33;
        margin-bottom: 2%;
        max-width:593.5px;
        max-height:100px;
    }

    .Slider2_Content_F{
        float:left;
        width:25%;
        height:50%;
        background-color:#121414;
        /*background: url('img/img11.jpg')50% 50% no-repeat;*/
        background-size:100% 100%;
    }

对不起，我会发布一个jsfiddle，但由于某些原因它没有正确解决我的问题。请复制并粘贴以了解我的问题。

我的问题是：如何将文字保留在<div>内？我需要在放大后将文本放在<div>内，并且滑块内容E必须是44％宽度，但文本不断向外推。

Answer 1

定义父元素，其中元素将充当容器或包装器：

position: relative;

以下简单示例：

<div class="contain"><div class="tobecontained">HEY DUDES</div></div>

.contain { 
  width: $width;
  height: $height;
  position: relative; // define
}

.tobecontained { 
  width: 80%; 
  height: $height;
  padding: 20px;
  text-align:center;
  margin: 0 auto;
}

更多信息：

“父母的相对定位在这里是最重要的。看如果你忘记了会发生什么：“

- Read More at this article.

Answer 2

只需将struct Rectangle { var width: Double var height: Double var area: Double { return width * height } }添加到具有固定宽度的元素上即可。

将文本保持在固定宽度的div中

2 个答案: