Question

所以我有两个div，我已经弄清楚如何在两行中相互水平显示。一旦我缩小了屏幕尺寸，它们似乎只是相互重叠。我想知道，一旦屏幕尺寸缩小到一定尺寸，是否有一种快速的方法可以让它们叠在一起。真的我需要左项目叠加在正确的项目之上。

这是html代码：

<div id="video-section" align="center">
      <div class="video">
        <iframe src="some-video-url" width="100%" height="100%"></iframe>
      </div>
      <div class="bullets">
        <p> <h4 align="center">Text</h4>
        <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        </ul>
        </p>
      </div>
      <div class="clearfix"></div>
</div>

这是css：

#video-section {
        max-width: 1000px;
        margin: 0 auto;
        vertical-align: center;
      }

      .video {
        width: 50%;
        height: auto;
        display: inline-block;
        float: left;
      }

      .bullets {
        width: 50%;
        text-align: left;
        display: inline-block;
        float: right;
      }

以下是这些图片的图片：

任何帮助都表示赞赏，主要目标是在屏幕尺寸较小时将它们叠加在一起。如果我的代码完全错误，如果有人认为有更有效的方法可以做到这一点，我会非常愿意改变它。

为了提供所有必要的信息，我在崇高的文本中使用带有纸质元素的聚合物库，并将其部署到firebase托管服务器。

Answer 1

如果你问一个快速的方法使用bootstrap.here是html的样子

＆＃13;

<head><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"></head><body>
<div id="video-section" align="center">
      <div class="video col-md-6">
        <iframe src="some-video-url" width="100%" height="100%"></iframe>
      </div>
      <div class="bullets col-md-6">
        <p> <h4 align="center">Text</h4>
        <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        </ul>
        </p>
      </div>
      <div class="clearfix"></div>
</div>

＆＃13;

添加

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

将header和col-md-6类添加到两个div中，以便它们在小屏幕上叠加并在大屏幕中保持水平。如果在不同的行中显示2个div，则在父div中添加2个div，并将col-md-12类添加到父div。问题解决了

Answer 2

添加一个媒体查询，创建一个断点，在该断点处元素的宽度达到100％，如下所示：

#video-section {
  max-width: 1000px;
  margin: 0 auto;
  vertical-align: center;
}
.video {
  width: 50%;
  height: auto;
  float: left;
}
.bullets {
  width: 50%;
  text-align: left;
  float: left;
}

@media screen and (max-width: 500px) {
  .bullets, .video {width: 100%;}
}

请注意，我对您的CSS也进行了一些小改进。

当屏幕尺寸较小时，将行堆叠中的div设置在顶部

2 个答案: