html - slider 图像被另一个 div 标签重叠

Question

我添加了菜单(右侧)，因为它将第一部分分为 2 (70-30)。从那时起，图像无法正常工作。当我减小宽度时，图像会重叠。一旦它小于平板电脑宽度，图像就会消失。在手机或平板电脑中，我希望图像先显示而不被剪切，然后显示右侧菜单(在图像下方，在手机和平​​板电脑中)。

<section class="no-padding main-slider height-100 mobile-height wow fadeIn" style="display:block;">
            
			<div class="swiper-full-screen swiper-container height-100 black-move mobile-height" id="section01" style="width:70%;float:left;z-index:1;">
                <div class="swiper-wrapper" style="margin-top:66px;display:inline-block;">
                    
                    <!-- start slider item -->
                    <div class="swiper-slide" style="background-image:url('./images/slide01.jpg');">
                    </div>
                    <!-- end slider item -->
                    <!-- start slider item -->
                    <div class="swiper-slide" style="background-image:url('./images/slide2.jpg');">
                    </div>
                    </div>
				<!-- start slider pagination -->
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next swiper-button-black-highlight display-none"></div>
                <div class="swiper-button-prev swiper-button-black-highlight display-none"></div>
                <!-- end slider pagination -->
            </div>
            <div class="mobile-height" id="section02" style="display:inline-block;float:right;width:400px;">
				<div class="container01" style="margin-top:66px;margin-bottom:12px;">
		
						<!-- testimonials begin -->
						<div class="tsl">
						  <ul class="tsl-list" style="background-color:#D32F2F;">
							<li class="tsl-item" style="color:white;">
							  <article class="tsl-content" style="padding-top:20px;">
									<p>Migrane</p>
								</article>
							</li>
							<li class="tsl-item" style="color:white;">
							  <article class="tsl-content" style="padding-top:20px;">
									<p>Sinus</p>
								</article>
							</li>
							<li class="tsl-item" style="color:white;">
							  <article class="tsl-content" style="padding-top:20px;">
									<p>Asthama</p>
								</article>
							</li>
						  </ul>
						</div>
					  
						<!-- testimonials end -->
						
				</div>
        </div>
        </section>

桌面宽度:

平板电脑或 iPad 宽度:

手机宽度:

Answer 1

实现此目的的一种快速方法是为两个 DIV 设置内联 block 。尽管使用像 Bootstrap 这样的东西可以极大地帮助你。您应该包含当前代码和样式，以便我们提供更多帮助

<style>
    .container {
     display:block;
    }

    .image-container {
     display:inline-block;
    }
    .menu-container {
     display:inline-block;
     float:right;
     width:400px
    }
</style>



<div class="container">
    <div class="image-container">
        image
    </div>
    <div class="menu-container">
        menu
    </div>
</div>