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

您可以使用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>

Answer 2

如果我理解您的问题，那么我认为向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>

Answer 3

您应该将div class =“ col-xs-12 mydiv”和div class =“ mytext”包装在一起，并指定一个位置：相对，然后使用包装纸的下边距获得所需的距离在两个盒子之间。检查此代码：

"9_9"

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

Answer 4

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

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

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

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

如何创建从下面溢出的文本div

5 个答案: