时间戳

首页 > 解决方案 > 移动版中的Div Blocks在彼此下

html - 移动版中的Div Blocks在彼此下

问题描述

连续有 3 个不同大小的块。我怎样才能让它们做出响应，因为在移动版本中它们相互重叠。

.watch {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 224px;
    height: 69px;
    cursor: pointer;
    background-color: #918A83;
    opacity: 0.85;
}

.watch-elements {
    margin: 20px 20px;
}

.watch p {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}

.mouse {
    position: absolute;
    bottom: 0;
    border: 1px solid #DAD3CC;
    width: 577px;
    height: 69px;
    cursor: pointer;
    background-color: #fff;
}

.mouse-elements {
    text-align: center;
    margin-top: 10px;
}

.mouse p {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
}

.chat-bot {
    position: absolute;
    bottom: 20px;
    background-color: #09A753;
    border-radius: 100px;
    right: 100px;
    width: 227px;
    height: 39px;
    cursor: pointer;
}

.chat-bot img {
    margin-top: -20px;
    margin-left: -15px;
}

.chat-bot p {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: -15px;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
}


@media all and (max-width: 1024px) {
    .watch img {
        position: absolute;
        float: left;
        left: 0;
    }
    .watch p {
        margin-left: 20px;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="container mt-5">
      <h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
    </div>
  </div>

  <div class="d-flex justify-content-left">
    <div class="watch">
      <div class="watch-elements">
        <img src="assets/img/icons/icon2.svg">
        <p>Watch Presenation</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center">
    <div class="mouse">
      <div class="mouse-elements">
        <img src="assets/img/icons/Icon1.svg"><br>
        <p>Scroll Down</p>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-right">
    <div class="chat-bot">
      <img src="assets/img/06w.png">
      <p>Hi, can I help you?</p>
      <img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
    </div>
  </div>
</div>

现在，它们排列成一排，如图所示

截屏

在移动版本中，左块消失了，我看不到它，第二块和第三块也相互重叠。

标签： htmlcssresponsive

解决方案

对于移动设备，请尝试使用位置：相对而不是位置：绝对。不要忘记根据您的要求调整其他 CSS 值。希望这能解决您的问题

@media all and (max-width: 767px) {
.watch, .mouse, .chat-bot{
position:relative;
right:auto;
left:auto;
top:auto;
bottom:auto;
margin:5px 0
}
}

推荐阅读