行动版中的Div方块彼此下

时间：2019-02-25 08:37:11

标签： html css responsive

连续有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>

现在，它们按照图片上的顺序排列

screenshot

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

4 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

我已将所有元素放在div class的{​​{1}}中。并使用footer bootstrap flex属性对其进行对齐。希望它能对您有所帮助。谢谢

css
.watch {
    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 {
    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 {
    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;
    }
}

.footer {
    position: absolute;
    bottom: 0;
}

答案 2 :(得分：0)

您可以尝试用下面的替换现有的div 

<div class="d-flex justify-content-left col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-center col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-right col-lg-3 col-md-6 col-xs-12">

答案 3 :(得分：0)

position:absolute和相关属性不适用于此功能。您可以使用CSS flexbox布局

有关更多信息，请使用以下链接：Complete Guide to Flexbox

我将通过示例解释flexbox布局的简单用法：

#wrapper{display:flex;flex-wrap:wrap;justify-content:space-between}

/*just for styles*/
#wrapper div{background-color:#f5f5f5;text-align:center;padding:2px 5px;margin:2px}
#e3{width:200px}
<div id="wrapper">
  <div id="e1">element 1</div>
  <div id="e2">element 2</div>
  <div id="e3">element 3</div>
  <div id="e4">element 4</div>
</div>

通过弹性布局，您还可以使用order属性基于视口大小来操纵元素位置。

相关问题
最新问题