如何创建从下方溢出的文本 div答案

【问题标题】：How to create a text div that overflows from below如何创建从下方溢出的文本 div
【发布时间】：2025-12-10 18:20:05
【问题描述】：

我正在尝试使用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>

【问题讨论】：

你的“我所拥有的”实际上并不是你所拥有的。请提供完整代码
用否定的margin-top代替position: absolute。

标签： html css twitter-bootstrap-3 absolute

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用position 属性来执行此操作，并且您可以使用col-md-offset-** 来居中列。下面是相同的sn-p

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

【讨论】：

【解决方案3】：

您可以使用具有固定大小的 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>

【讨论】：

【解决方案4】：

非常感谢，这是我的解决方案：

<div class="col-sm-8 col-md-offset-2 text-center intro">

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

【讨论】：

【解决方案5】：

如果我理解您的问题，那么我认为向 myotherdiv 添加一个 margin-top 值应该可以解决这个问题。

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>

【讨论】：

code sn-p 没有显示任何内容。您缺少 HTML 代码。