html - 如何创建一个从下面溢出的文本div

Question

我正在尝试使用 Bootstrap 3.x 对此设计进行编码，但我在使用以下 div 时遇到了问题。 有什么建议吗？

explanations

img{max-width:100%;}
.mydiv{margin-bottom:20px;}
.mytext{
        position: absolute;
        top: 90%;
        right: 50%;
        -ms-transform: translateX(50%);
        transform: translateX(50%);
        width: 70%;
        background-color:#ff0000;
    }
   .myotherdiv{background-color:#00ff00;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12 mydiv">
              <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="mypicture" />
              <div class="mytext">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                 
              </div>
         </div>

         <div class="col-xs-12 myotherdiv">
             My other div text. My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.
         </div>

Answer 1

您应该将 div class="col-xs-12 mydiv"和 div class="mytext"包装在一起，给出一个 position: relative 然后使用包装器的 margin-bottom 来获得您想要的距离在两个盒子之间。检查此代码:

    .mytext{
    position: absolute;
    top: 90%;
    right: 50%;
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    width: 70%;
    }
    .myotherdiv{
    position:relative;
    }
    .wrapper{
    margin-bottom:50px;
    }

<div class="wrapper">
        <div class="col-xs-12 mydiv">
          <img src="picture.png" class="mypicture" />
          <div class="mytext">
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor                    invidunt ut labore
          </div>
        </div>
     </div>

     <div class="col-xs-12 myotherdiv">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
     </div>