滑块图像被另一个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设置内联模块。尽管使用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>