Question

我正在尝试使这两个div一起很好地玩，但是它不起作用。我已经将大屏幕视图放下了，但是无论我做什么，div都不会在小屏幕（移动设备）上正确叠放在一起。目前，我的代码已将它们堆叠在一起，但现在拒绝将第二个显示在一起。我尝试了其他问题中的许多建议，但是我遇到了同样的问题（不显示第二个格），或者它们仍然会并排出现。

我在其他问题中尝试了许多建议，但是我遇到了同样的问题（没有显示第二个格），或者它们仍然会并排出现。

大屏幕有效，小屏幕可以显示div堆叠在一起，但仅显示div1。

fun randomString(stringLength: Int): String {
    val list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".toCharArray()
    var randomS = ""
    for (i in 1..stringLength) {
        randomS += list[getRandomNumber(0, list.size - 1)]
    }
    return randomS
}

fun getRandomNumber(min: Int, max: Int): Int {
   return Random().nextInt((max - min) + 1) + min
}

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
  display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .container_main1 {
    height: 69px;
    min-width: 100%;
  }
  .container_main2 {
    height: 200px;
    margin-top: 10px;
    min-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    flex: 0 0 40%;
    padding-left: 50px;
    padding-right: 20px;
  }
  .container_main2 {
    flex: 1;
    padding-right: 20px;
    padding-left: 50px;
  }
}

Answer 1

您丢失了

.hiraola-banner_area-3 {
    flex-wrap: wrap;
}

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
  display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .hiraola-banner_area-3 {
    flex-wrap: wrap;
  }
  .container_main1 {
    height: 69px;
    min-width: 100%;
  }
  .container_main2 {
    height: 200px;
    margin-top: 10px;
    min-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    flex: 0 0 40%;
    padding-left: 50px;
    padding-right: 20px;
  }
  .container_main2 {
    flex: 1;
    padding-right: 20px;
    padding-left: 50px;
  }
}

<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>

Answer 2

首先设置容器div的宽度。然后，您可以将两个div的宽度分别设置为大屏幕的50％和小屏幕的100％。这样，当视口更改大小时，它们将自动调整。

Answer 3

您还可以将display：inline-block用于大屏幕，将display：block用于小屏幕。应该得到几乎相同的结果，但不使用flex。

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
}

.container_main1, .container_main2 {display:inline-block;}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .container_main1 {
    display:block;
    height: 69px;

  }
  .container_main2 {
    display:block;
    height: 200px;
    margin-top: 10px;
 
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    width:50vw;
    padding-left: 50px;
    padding-right: 20px;
    vertical-align:top;
  }
  .container_main2 {
    padding-right: 20px;
    padding-left: 50px;
  }
}

<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>

希望这会有所帮助。

使两个div在大屏幕上并排响应，在移动设备上彼此对应

3 个答案: