Question

我正在使用flex-column并将页面分成两个部分，这样当页面调整大小时，右列可以在左侧部分下方移动。但现在右栏上的图像是重叠的。这是我用于这两个部分的代码。

    <div class="container">
          <!-- section on the left -->
  <section class="flex-column col-lg-6 one">
        <header class="logo">
        <img src="images/Visit_Ms_8_gray.png" alt="" width="382" height="119" />
      <h1 id="civil">Civil Rights</h1>
        </header>
	      <div class="p-2">
		<h1>Play Now</h1> 
<div class="info">
                    <p style="display:inline-block;">Civil Rights Museum<br><span class="subtext">Jackson</span></p>
                <button class="button" style="display:inline-block; ">Get Tickets</button>
    </div>
                    

 <iframe width="560" height="294" src="https://www.youtube.com/embed/9zrFH-hWaXA" style="background-image:url(images/video_b.jpg)" >
    </iframe>
	  </div>

 
<div class="col-lg-6">
                    <p class="subcopy">Concert Schedule at the Historic Alamo <span class="subtext">Jackson</span></p>

 <img src="images/img1.jpg">
    </div>
                                                
					    <div class="col-lg-6">
				                    <p class="subcopy">Cleveland Buckner Art Show at JSU <span class="subtext">Jackson</span></p>

 <img src="images/img2.jpg">
	  
	  </div>

		  <div class="col-lg-12">
			  <div class="book"><button class="button2">Book Now</button><p>Westin Downtown Jackson</p> </div>
			  <div class="book"><button class="button2">Book Now</button><p>Hotel King Edward</p></div>
			  <div class="book"><button class="button2"> Listen  </button><p>Roadtrip Playlist on Spotify
</p></div>
          </div>
        </section>
	  
	  
	  
	  
	  <!-- section on the right -->
	 <section class="flex-column col-lg-6 two"> 
		            <header align="right">
        <h1>Play More</h1>
        <img src="images/arrow.png" />
              </header>
         
    <div class="p-2">
    <div class="flex-item col-lg-6" >
                <h1 id="later">Play Later</h1>
<div class="infob">
                    <p style="margin-bottom: 16px;">Mississippi Freedom Trail <span class="subtext">Multiple</span></p>
     <img src="images/img3.jpg">
    </div>
     
    </div>

       
                        <div class="flex-item col-lg-6">
                <h1 id="laterb">.</h1>
https://stackoverflow.com/posts/46837049/edit#<div class="infob" >
                    <p style="margin-bottom: 16px;">Mississippi Freedom Trail <span class="subtext">Multiple</span></p>
     <img src="images/img4.jpg">
     
    </div>
            </div>
         </div>

		 			<div class="flex-item">
				                    <p class="subcopy">Bestonia Blues Festival <br> <span class="subtext">Bestonia</span><br></p>

 <img src="images/img5.jpg" width="560px" height="294">
			</div>
		 		  <div class="flex-item">
		    <p id="insta_text">Instagram Freed</p>
			  <img src="images/instrampic.jpg"/>
		  </div>
		 
    	</section>
          
</div>

http://rameyagency.com/clients/tourism/landingpg/version2/index.html 一些图像重叠。

建议我使用flexbox并将这些部分分成两部分。

Answer 1

虽然我没有使用新版本的Bootstrap（它引入了“flexbox”），但我确实注意到你在右侧的flex-column中放置了许多flex项，并且你的图像在其中。这可能是导致图像重叠的原因，因为您没有按列/行方式排列flex项。这使得他们的容器将它们视为相等，并将它们放在一起，在这种情况下将它们放在另一个上面。

我建议您考虑在较大的flex-column上实现网格系统。这将允许您按行和列排序，并根据需要将图像放在生成的网格中。

查看here。有多种选择和方法可以安排自己独特的网格。我相信其中一个会适合你的账单。

祝你好运！

一些引导列重叠

1 个答案: