将 div 放在带有图像的父 div 的右侧部分

Question

我想制作如下图所示的部分。我在我的网站中使用 bootstrap。

我写了下面的代码。但我不明白如何将 div 放置在垂直中间部分，我也不确定手动放置父 div 的宽度和高度是否正确。请在下面查看我的代码

.main-img{
    background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
    width: 100%;
    height: 700px;

}

.con-righ{
color:white;

}
.new-h4 {
 color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}

.but-red{
    padding: 15px;
    border-radius: 5px;
    background-color: #ff0000;
    color: white !Important;
    width: max-content;
    font-size: 18px;
    text-decoration: unset;
    transition: .3s all;
    overflow: hidden;
    display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="row main-img">
<div class="col-sm-6"></div>
<div class="col-sm-6 con-righ">
   <h4 class="new-h4">Lorem ipsum</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <a class="but-red" href=""> Know More</a>
</div>

</div>

请帮助获得相同的结果。

Answer 1

.main-img{
  background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
  height: 400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.con-righ{
  color:white;
  display: inline-block;
  max-width: 50%;
}
.new-h4 {
 color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}

.but-red{
    padding: 15px;
    border-radius: 5px;
    background-color: #ff0000;
    color: white !Important;
    width: max-content;
    font-size: 18px;
    text-decoration: unset;
    transition: .3s all;
    overflow: hidden;
    display: block;
}

<div class="main-img">
  <div class="con-righ">
     <h4 class="new-h4">Lorem ipsum</h4>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     <a class="but-red" href=""> Know More</a>
  </div>

</div>

希望这会对你有所帮助。

请使用引导程序 3 找到相同的内容。您可以删除您添加的额外 div (col-6) 以腾出空间。因为，这里我也使用 flexbox 来垂直和水平对齐内容 div。您可以在不破坏任何现有布局的情况下遵循此方法。

.main-img{
  background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
  height: 400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.con-righ{
  color:white;
  display: inline-block;
  max-width: 50%;
}
.new-h4 {
 color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}

.but-red{
    padding: 15px;
    border-radius: 5px;
    background-color: #ff0000;
    color: white !Important;
    width: max-content;
    font-size: 18px;
    text-decoration: unset;
    transition: .3s all;
    overflow: hidden;
    display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="row main-img">
<div class="col-sm-6 con-righ">
   <h4 class="new-h4">Lorem ipsum</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <a class="but-red" href=""> Know More</a>
</div>

</div>

Answer 2

.main-img{
    background-image: url('https://i.imgur.com/oJRtoXq.jpeg');
    width: 100%;
    height: 700px;


}

.con-righ{
color:white;

}
.new-h4 {
 color: white;
font-size:25px;
}
.con-righ p{
font-size:17px;
}

.but-red{
    padding: 15px;
    border-radius: 5px;
    background-color: #ff0000;
    color: white !Important;
    width: max-content;
    font-size: 18px;
    text-decoration: unset;
    transition: .3s all;
    overflow: hidden;
    display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="row main-img" style="justify-content: flex-end; display:flex; align-items:center;">

<div class="col-sm-6 con-righ" style="float:right;">
   <h4 class="new-h4">Lorem ipsum</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   <a class="but-red" href=""> Know More</a>
</div>

</div>

Answer 3

固定高度到背景可能会导致多次出现问题，您可以设置填充而不是固定高度来解决这个问题。

请看一下这个响应式布局的例子。

.bg-main{
      background-image:   url('https://i.imgur.com/oJRtoXq.jpeg');
      background-size:cover;
      background-position: left;
      background-repeat: no-repeat;
      padding:80px 0;
}

@media (min-width: 992px) {
    .bg-main{
        padding:140px 0;
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<section class="bg-main">
  <div class="container">
    <div class="row justify-content-end">
        <div class="col-md-6">
            <h2 class="text-white">Lorem ipsum</h2>
            <p class="text-light mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus eos veniam officia nulla fugit tenetur nobis nesciunt laboriosam, repellat quod impedit quos nam culpa quam, quisquam, reiciendis consequuntur odit fugiat?</p>

            <a href="" class="btn btn-danger">Know more</a>
        </div>
    </div>
    </div>
</section>