我正在为项目使用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;
}
}
答案 0 :(得分:0)
所以我建议您将这两行移至标题
dataset = tf.data.Dataset.from_tensor_slices((df['text'],
(df['feature1'].values.astype(int),
df['feature2'].values.astype(int),
df['feature3'].values.astype(int)))
然后我们剩下下面的
<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>
这应该可以解决您的问题