响应式布局问题：2个元素并排放置

Question

我正在为项目使用Addpipe记录器服务，并且希望将其放在Desktop上的嵌入式视频旁边。 我正在使用媒体查询来使网站响应，并在电话屏幕上，我希望记录器进入下一行。 在任何时候，我都希望一切都处于中心。 这是项目的链接： https : //fewnew.github.io/YNWA-web/

我尝试将记录器和嵌入式视频分成两列，一行一行。 在手机大小上看起来还可以，但在台式机上看起来不行。 Piperecorder采用内联高度和宽度值。 我将值设置为百分比，但似乎没有受到影响。 我是一名初学者Web设计师，对于我尝试创建的这种布局的任何帮助，我将不胜感激。 谢谢！

HTML代码：

<div class="row">

  <iframe class="half column" id="video" src="https://player.vimeo.com/video/251551404" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

  <!-- begin video recorder code -->

  <link rel="stylesheet" href="https://cdn.addpipe.com/2.0/pipe.css"/>

  <script type="text/javascript" src = "https://cdn.addpipe.com/2.0/pipe.js"></script>

  <piperecorder class="half column" id="custom-id" pipe-width="100%" pipe-height="280" pipe-qualityurl="avq/288p.xml" pipe-accountHash="22864bed1e4827f6798d501706aeb89f" pipe-eid="1" pipe-mrt="120" ></piperecorder>

  <!-- end video recorder code -->

</div>

---

CSS代码：

/* Mobile first styles go here */

html {
    box-sizing: border-box;
}

* {
    margin, padding:0;
}

*, *:before, *:after {
    box-sizing: inherit;

.container {
    width:80vw;
    margin: 0 auto;
}

.row::before,
.row::after {
    display: table;
    content: " ";
    clear: both;
}

.one,
.one-third,
.two-thirds,
.one-fourth,
.half {
    width: 100%;
}

#video {
    width:100%;
    height:280px;
    margin-top:6vh;
    margin-right:10px;
}

#custom-id {
    margin-top:6vh;
}

/* Desktop styles go here */

@media screen and (min-width: 800px) {

  .one {
        width: 100%;
    }
    .half {
        width: calc(100% / 2);
    }
    .one-third {
        width: calc(100% / 3);
    }
    .one-fourth {
        width: calc(100% / 4);
    }
    .two-thirds {
        width: calc(100% / 3 * 2);
    }
    .column {
        float: left;
    } 
}

Answer 1

所以我建议您将这两行移至标题

<link rel="stylesheet" href="https://cdn.addpipe.com/2.0/pipe.css"/>

  <script type="text/javascript" src = "https://cdn.addpipe.com/2.0/pipe.js"></script>

然后我们剩下下面

<div class="row">

  <div class="half-column">
        <iframe class="iframe"  id="video" src="https://player.vimeo.com/video. /251551404" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
   </div>

  <div class="half-column">
        <piperecorder class="piperecorder" id="custom-id"  pipe-accountHash="22864bed1e4827f6798d501706aeb89f" pipe-eid="1" pipe-mrt="120" ></piperecorder>
   </div>

</div>

和样式

.row {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.half-column {
  display: flex;
  flex: 1;
  justify-content: center;
}

.iframe {
  height: 270px;
}

@media screen and (min-width: 800px) {

  .row {
     flex-direction: row;
    }
}

这应该可以解决您的问题