responsive 相关问题

我的网页上有两个主要容器：1. 和 2.。我的，我的第一个内容我的网页上有两个主要容器：1.<div class="main"> 和 2.<section class="main-cars">. 我的<div class="main">，我网页的第一个内容，是一个在后台播放的视频（在一些标题后面）的 Vimeo 集成。这个容器在计算机上完美呈现，并且在计算机上模拟的所有响应设备上。但是，当涉及到在我的智能手机上加载页面时，1. 容器溢出了一点 2. 容器。附上截图：下面是它应该是这样的，以及用 Responsive Viewer 模拟时的样子：如您所见，应用在我的 1. 容器上的线性渐变溢出了我的第二部分（白色部分）。这很难解决，因为它只发生在手机上，而不是计算机上的模拟手机。 .main { top: 0; background-color: #111111 i !important; margin-top: 0px; height: 60em; width: 100%; display: flex; flex-direction: column; height: 100%; } .header-c { position: absolute; top: 0; left: 0; right: 0; z-index: 99; } .header { display: flex; flex-direction: row; padding-top: 0.2333333333rem !important; padding-bottom: 0.175rem !important; margin-left: 5%; margin-top: 1em; } .container-main { position: relative; display: flex; height: 100%; align-items: flex-end; overflow: hidden; min-height: 100vh; } .cont { z-index: 1; background-color: rgba(0, 0, 0, 0.4); height: 100%; width: 100%; display: flex; justify-content: flex-start; } .ttt { display: flex; flex-direction: column; padding-right: 5em; margin-top: auto; margin-left: 5%; margin-bottom: 10em; } .fluids { position: absolute !important; display: flex !important; overflow: hidden !important; height: 100%; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.777778vh !important; } .vid { width: 100%; max-width: 100%; position: relative; } .fluidvids-item { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } img, video, iframe { max-width: 100%; display: block; } /* SECTION CODE*/ .main-cars { display: flex; justify-content: center; flex-direction: column; background-color: #fff; position: relative; } <div class="main"> <div class="header-c"> <div class="header"> <div class="logo-c"> <img src="FinanceUI.png" alt="" class="logo"> <div class="logo-title-c"> <span class="logo-m">Ghost-Cars</span> <span class="loc-logo">Paris - Cannes - Monaco</span> </div> </div> </div> </div> <div class="container-main"> <div class="cont"> <div class="ttt"> <div class="c-c">Luxury Cars Rentals <br class="br"> with style.</div> <div class="lang-c"> <p class="lang">Français</p> <p class="lang underline">English</p> <p class="lang">Polski</p> </div> </div> </div> <div class="fluids"> <div class="vid"> <iframe id="recruiting-video-cover" class="transition-opacity fluidvids-item" src="https://player.vimeo.com/video/823655290?h=114a4fac97&autopause=1&autoplay=1&background=1&loop=1&muted=1&playsinline=1&transparent=1&texttrack=false;app_id=58479" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" style="pointer-events: none; opacity: 1;" title="Join us in shaping the future of technology" data-fluidvids="loaded" data-ready="true" autoplay=1 loop=1></iframe> </div> </div> </div> </div> <section class="main-cars">  </section> 我尝试申请一个position: relative;，结果在屏幕上。此外，使用 z-index: 100;第 2 节位于主 div 之上，因此它可以工作但会溢出 1. 容器：不是解决方案。如有需要，网站位于：financeui.org

html css responsive

回答 0 投票 0

滚动和鼠标悬停，mouseleave jquery [关闭]

我已经被这个问题困了三天了...... 请帮忙解决。任务：如果我们将页面滚动到具有类 Section-1 的块，那么带有图标和文本应用程序的红色按钮...

jquery scroll responsive mouseover mouseleave

回答 0 投票 0

我怎样才能使下拉按钮响应

我需要两个下拉按钮的响应能力方面的帮助，当它打开时，按钮在文本上方，我希望它是那样的，但我不知道如何让它响应，完成了六...

javascript html css button responsive

回答 0 投票 0

CSS 网格使 iframe 无响应

我正在尝试使用 CSS 网格线在我的 HTML 页面（Chrome 浏览器）上组织一个嵌入式 iframe 视频。然而，似乎网格区域正在“覆盖” iframe，使其如此......