Question

我是html和css的新手。对不起这个太容易的问题，也许是愚蠢的。 vid2下的vid2，没关系。但是，我尝试将vid3的权限放到vid1上。但它不起作用。

实际上，我想做那样的事情;

的index.html;

[vid1] [vid3] [vid5]

[vid2] [vid4] [vid6]

你能帮我修改一下代码吗？谢谢。

＆＃13;

.vid1
    {
    position: absolute; overflow:hidden; left: 10px; top: 10px; z-index:0;
    }
    .vid2
    {
    position : absolute; overflow:hidden; left::20px; top:180px;  z-index:0;
    }
    .vid3
    {
    position : absolute; overflow:hidden; left::200px; top:10px;  z-index:0;
    }

＆＃13;

<iframe class="vid1" src="http://www.youtube.com/embed/r9dsH8H-4P8" frameborder="0" allowfullscreen></iframe>
<iframe class="vid2"  src="http://www.youtube.com/embed/i7sxqaC062A" frameborder="0" allowfullscreen></iframe>
<iframe class="vid3"  src="http://www.youtube.com/embed/YeJQBbtjgK8" frameborder="0" allowfullscreen></iframe>

＆＃13;

Answer 1

您应该将代码left :: 200px;更改为left : 200px;，然后您可以避免绝对位置连续获得3 ..

Answer 2

Transparent的CSS，如下所示

.vid3

希望它有所帮助。

Answer 3

使用这个我觉得有帮助。

.video{width:300px; float:left;}

<div class="video">
<iframe class="vid1" src="http://www.youtube.com/embed/r9dsH8H-4P8" frameborder="0" allowfullscreen></iframe>
<iframe class="vid2" src="http://www.youtube.com/embed/i7sxqaC062A" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video">
<iframe class="vid3" src="http://www.youtube.com/embed/YeJQBbtjgK8" frameborder="0" allowfullscreen></iframe>
<iframe class="vid4" src="http://www.youtube.com/embed/YeJQBbtjgK8" frameborder="0" allowfullscreen></iframe>
</div>

Answer 4

我建议你不要使用position: absolute;，因为如果你改变显示/窗口大小会太乱，而且你的代码也太复杂了以后不能使用。

我建议的是使用相对定位逐列。
像这样：

列1列2列3

[VID1] [vid3] [vid5]

[VID2] [VID4] [VID6]

以下是具有上述相对定位修改的代码：

iframe {
  display: block;
  margin: 0 0 10px 0;
}

iframe:nth-child(2) {
  margin: 0;
}

.row {
  clear: both;
  padding: 0px;
  margin: 0px;
}

.column {
  display: block;
  float: left;
  margin: 10px 0 0 0;
}

.column:first-child {
  margin-left: 0;
}

.col_1_of_3 {
  width: 32.66%;
}

@media only screen and (max-width: 1000px) {
  .col_1_of_3 {
    width: 100%;
  }
}

<html>

<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div class="row">

    <!--COLUMN 1-->
    <div class="column col_1_of_3">
      <iframe id="vid1" src="http://www.youtube.com/embed/r9dsH8H-4P8" frameborder="0" allowfullscreen></iframe>
      <iframe id="vid3" src="http://www.youtube.com/embed/i7sxqaC062A" frameborder="0" allowfullscreen></iframe>
    </div>

    <!--COLUMN 2-->
    <div class="column col_1_of_3">
      <iframe id="vid2" src="http://www.youtube.com/embed/YeJQBbtjgK8" frameborder="0" allowfullscreen></iframe>
      <iframe id="vid4" src="http://www.youtube.com/embed/r9dsH8H-4P8" frameborder="0" allowfullscreen></iframe>
    </div>

  </div>

</body>

</html>

在整页中运行上面的代码段并自行验证布局。此代码的优势在于，它可以轻松扩展，以您指定的相同方式添加更多视频，并且还可以响应 - 使用平板电脑和手机等小型设备。

您始终可以依赖这个简单的网格生成器工具：http://www.responsivegridsystem.com，它可以生成优雅的响应式CSS网格代码。

如果您在我的回答中发现含糊不清的内容，请告诉我这是否有帮助，也可以随意提问。

物品位置由css？

4 个答案: