使用文字和图片引导两个容器

Question

这对我来说安静一段时间有点棘手，我不确定如何实现以下设计：图片＆＃34;右上角＆＃34;左下边缘和左下底部右上边缘应相互碰撞。 我认为对于css / bootstrap老手来说，它应该不是问题

我在这里使用bootstrap是我的代码：

＆＃13;

＆＃13;

#forth .col-md-6 {
    padding: 0 !important;
    
    
}


/* First subsection styling */
.fourd-paragraph .col-md-6:first-child{
    margin: 0 auto;
    text-align:block;
    left: 6%;
    padding-top:2%;
    
}

.fourd-paragraph .col-md-6:first-child h1 {
    font-size: 34px;
    
}

.fourd-paragraph .col-md-6:first-child p {
    font-size: 30px;
    line-height: 50px;
    padding-top:3%;
    width: 600px;
    
}


.fourd-paragraph:first-child .col-md-6 .img-responsive {
    float:right;
}


/* second subsection styling */

.left-img  {
    float:left;
    width:100%; 
    padding-left: 0 !important;
    

}

＆＃13;

<section>
    <div class="container-fluid">
     <div class="row">
      <div class="cold-md-12 third-paragraph">
        <div class="row">
          <h1>Lorem Ipsum?</h1>
                <p>Lorem ipsum dolor sit amet consectetur,  nemo                         voluptatum illo molestiae sequi maxime perspiciatis c                     onsectetur nisi l.Nulla facilis voluptatem .</p>
        </div>
      </div>
     </div>
    </div>
</section>
<section>
 <!-- First subsection of foruth paragraph -->
  <subsection>
    <div class="container-fluid">
     <div class="row">
            <div class="cold-md-12 fourd-paragraph">
                <div class="col-md-6">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum dolor sit amet consectetur,  nemo                         voluptatum illo molestiae sequi maxime perspiciatis c                     onsectetur nisi l.Nulla facilis voluptatem 
                    </p>
                </div>
                 <div class="col-md-6">
                    <img             src="https://cdn.pixabay.com/photo/2017/09/22/23/57/fire-2777580_960_720.jpg" class="img-responsive">
                 </div>
               </div>
            </div>
      </div>
    </div>
  </subsection>

        <!-- Second subsection of paragraph -->
        <subsection>
            <div class="container-fluid">
             <div class="row">
                 <div class="col-md-12">
                     <div class="row">
                        <div class="col-md-6">
                         <img src="https://cdn.pixabay.com/photo/2017/09/22/23/57/fire-2777580_960_720.jpg" class="img-responsive left-img">
                        </div>
                        <div class="col-md-6">
                            <h1> hi from left</h1>
                        </div>
                     </div>
                 </div>
             </div>
            </div>


        </subsection>



    
</section>

＆＃13;

＆＃13;

＆＃13;

此外，我非常感谢编码改进。谢谢！

Answer 1

如果您想要更好地控制网格，我建议您进入CSS Grids。希望这个例子可以告诉你，你可以轻松获得你想要的网格。

＆＃13;

＆＃13;

.text_section {
	background: dodgerblue;
}

/** Define grid names **/
.section_one {
	grid-area: text-one;
}
.section_two {
	grid-area: text-two;
}

.img_one {
	grid-area: img-one;
}
.img_two {
	grid-area: img-two;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/** apply grid names here**/
	grid-template-areas:
	"text-one img-one"
	"img-two text-two";
}

＆＃13;

<div class="container">
	<section class="text_section section_one">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut tempora voluptate, fugit nemo nisi velit aliquid ab? Ab, voluptatibus quas.</p>
	</section>
	<section class="img_section img_one">
		<img src="http://lorempixel.com/output/city-q-c-250-250-3.jpg" alt="img">
	</section>
	<section class="text_section section_two">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut tempora voluptate, fugit nemo nisi velit aliquid ab? Ab, voluptatibus quas.</p>
	</section>
	<section class="img_section img_two">
		<img src="http://lorempixel.com/output/city-q-c-250-250-3.jpg" alt="img">
	</section>
</div>

＆＃13;

＆＃13;

＆＃13;