Как создать текстовый div, который переполняется снизу

Question

Я пытаюсь закодировать этот дизайн с Bootstrap 3.x, но у меня проблема со следующим div. Предложения?

Объяснения

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-sm-8 col-md-offset-2 text-center intro">

.mytext{
            background-color: #fff;
            padding: 30px;
            transform: translateX(00%);
            margin-top: -60px;
        }

Answer 2

Вы можете использовать свойства position:relative и position:absolute с фиксированными размерами, например:

.contain{
  width: 400px;
  height: 250px;
  position: relative;
}
.parent{
  width: 100%;
  height: 200px;
  background: gray;
}
.child{
  width: 50%;
  height: 100px;
  background: blue;
  position: absolute;
  bottom: 0;
  left: 25%;
}
.other{
  position: relative;
  width: 400px;
  height: 75px;
  background: green;
  margin-top: 10px;
}

<div class="contain">
  <div class="parent"></div>
  <div class="child"></div>
</div>
<div class="other"></div>
<p>some text...</p>

Answer 3

Если я понимаю ваш вопрос, то я думаю, что добавление значения margin-top к myotherdiv должно решить эту проблему.

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;
  margin-top: 130px;
}

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

Вы должны обернуть элементы div class = "col-xs-12 mydiv" и div class = "mytext" вместе, указав позицию: относительный, а затем поиграйте с полем нижнего края вашей обертки, чтобы получить желаемое расстояние.между двумя коробками.Проверьте этот код:

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

Answer 5

вы можете сделать это, используя свойство position, а для центрирования столбца вы можете использовать col-md-offset-**. Ниже приведен фрагмент для того же

    .center {
      background: skyblue;
      color: white;
      position: relative;
      top: -50px;
    }
    .main{
      border:1px solid red
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div>
      <img src="https://img.freepik.com/free-vector/plain-red-blurred-background_1035-3332.jpg?size=338&ext=jpg" style="width:100%;height:50vh">
      <div class="col-sm-4 col-md-offset-4 center text-center">
        <h2>Div1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        
      </div>
    </div>
    <div class="col-sm-12 main text-center">
      <h1>Other DiV</h1>
    </div>
  </div>
</body>

</html>