时间戳

首页 > 解决方案 > 如何让 2 个响应式容器在桌面上并排显示，并与移动设备堆叠在顶部？

html - 如何让 2 个响应式容器在桌面上并排显示，并与移动设备堆叠在顶部？

问题描述

我似乎找不到将段落/描述文本移动到视频右侧的方法。我希望它在使用移动设备时堆叠在视频下方（响应式）。

https://jsfiddle.net/48xzvyrs/

我试过使用 inline-block 方法，text-align，似乎什么都没有！请给我一个示例代码，说明我可以做些什么来解决这个问题！

CSS

@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');
h1 {
    color: #8A8A8A;

}

p{
    color: black;
    font-size:1.2vw;

}

#roundCorners1 {
  width: 100%;
  display: inline-block;
}

.clearfix {
  overflow: auto;
}

.video {
  border: 5px;
  border-style: none solid none none;
  border-color: blue;
  display: inline-block;
  margin-bottom: 25px;
  height: 300px; width: 600px; padding-right:5%;
}
.paragraph {
 display: inline-block;
  margin-bottom: 25px;
  height: 300px; width: 600px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */

@media screen and (max-width: 320px) {

  .video {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }

   .paragraph {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }


   #rightBorder {
  width: 100%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }


}

HTML

<div class="container" style="
background-color:white; 
padding-bottom: 30px;
font-family: 'Work Sans', sans-serif;"
id="rightBorder">

<div class="clearfix">
<h1 style="text-align:right; padding-right:5%;margin-top: 0px;">Episode 1</h1>

<div class="video">
<div style="width: 100%; max-width: 600px; max-height: 392px; padding-right:5%;"><div style="position: relative; padding-bottom: calc(56.25% + 55px); width: 100%; display: inline-block;"><iframe frameborder="0" scrolling="no" allowfullscreen allow="autoplay" src="https://sermons.faithlife.com/embed/sermons/374580" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
</div>

<div class="paragraph">
<p> 
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br>Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br>
</p>
</div>



</div>
<br><br>

标签： htmlcssresponsive

解决方案

使.video元素成为 flexbox 并消除width限制：

.video {
  border: 5px;
  border-style: none solid none none;
  border-color: blue;
  margin-bottom: 25px;
  height: 300px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

此外，尝试重构您的 html 以使其更具可读性，这将避免您出现很多解析错误或问题（您最后错过了两个</div>结束标签）。

推荐阅读