javascript - 响应式布局问题 : Having 2 elements side by side

Question

我正在为一个元素使用 Addpipe 记录器服务，我想将它放在桌面上的嵌入式视频旁边。我正在使用媒体查询来使网站响应并在电话屏幕上，我希望录音机进入下一行。在任何时候我都希望一切都居中。这是元素的链接:https://fewnew.github.io/YNWA-web/

我试过将录像机和嵌入式视频分成一行的两列。它在手机尺寸上看起来不错，但在桌面上却不行。 Piperecorder 采用内联高度和宽度值。我将值设置为百分比，但它似乎没有受到影响。我是一名初学者网页设计师，对于我尝试创建的布局的任何帮助，我将不胜感激。谢谢!

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;
    }
}

这应该可以解决您的问题