Question

你好:)我正在尝试学习一些非常基本的HTML，并且我遇到问题让视频按我想要的方式运行:(我希望我可以拥有3个图像和视频，同时显示大小，在同一条线上彼此相邻，等距离。

我的HTML看起来像这样：

<div class="flex-container2">

<img src="lolly_jar.jpg" 

style="width:200px;height:400px;padding-left:20px;">



<img src="lolly_jar_top_down.jpg" 

style="width:200px;height:400px;padding-left:20px;">



<img src="lolly_jar_with_measurement.jpg" 

style="width:200px;height:400px;padding-left:20px;">


<rotates>
<video style="width:75%;" autoplay loop muted  
    <source src="lolly_jar_movie_best.MOV" type = "video/MOV" > >

</rotates>

我的CSS看起来像这样

[![.flex-container2 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;

padding-top:20px;
padding-left:20px;
padding-right:20px;

}

/* I need to rotate the video or it plays horizontally because 
of the way I shot it on my phone */

rotates {
     display:block;
     -ms-transform: rotate(90deg); /* IE 9 */
     -webkit-transform: rotate(90deg); /* Safari */
     transform: rotate(90deg);
}
</div>

我在下面附上我目前的代码最终看起来像。我真的无法弄清楚为什么视频处于一个奇怪的位置，或者为什么它周围有一堆空间......

谢谢大家的帮助和时间

Answer 1

您是否为HTML文档设置了样式表？例如，<link rel="stylesheet" href="./css/downtownboxingglobal.css">？

为什么不尝试绑定导航栏水平相邻播放？这是关于导航栏的W3Schools教程。特别是，您需要阅读有关水平导航栏的部分。

https://www.w3schools.com/css/css_navbar.asp

这是他们的代码，在浏览器视口中方便。

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

HTML视频旋转，大小和定位

1 个答案: