无法在 div 元素中放置 iframe - HTML 和 CSS

debugcn 发表于 Dev

康纳

每当我尝试在创建的 div 元素中渲染嵌入的 youtube 时，视频都会超出我创建的 div 的边界。

注意：这是一个家庭作业。我不是在寻找要复制的代码，只是在正确方向上的提示或推动。

- 规则不能放在 HTML 代码中，必须在样式表中

- 已在样式表中设置的规则在分配中概述（包括浮动）。

CSS：

.container {
    width: 100%;
    background-color: #60c90e;
}

.content {
    width: 100%;
}

.video {
   width: 95%;
   margin: 2.5%;
   border-radius: 20px;
   padding: 1%;
   background-color: white;
}

.footer {
    background-color: aqua;
    height: 50px;
}

.video iframe {
    width: 65%;
    margin: 10px;
    float: left;
}

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="CSS/test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container">

  <div class="content">

    <div class="video">

        <iframe width="560" height="315" src="https://www.youtube.com/embed/vC130RwBJQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        <h3>test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. Ut porttitor leo a diam sollicitudin tempor. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Orci eu lobortis elementum nibh tellus. Nam at lectus urna duis convallis convallis tellus id. Tellus id interdum velit laoreet id donec. Nunc faucibus a pellentesque sit amet porttitor </p>

   </div> <!-- end of video -->

 </div> <!-- end of content -->

<footer class="footer">test</footer>

</div> <!-- end of container -->   

</body>

</html>

椒盐脆饼

你需要清除浮动iframe内.video div。无需编辑 HTML，您就可以使用::after伪元素来完成。我已将以下代码添加到您上面的示例中：

.video::after {
    content: '';
    display: block;
    clear: both;
}

工作片段：

.container {
    width: 100%;
    background-color: #60c90e;
}

.content {
    width: 100%;
}

.video {
   width: 95%;
   margin: 2.5%;
   border-radius: 20px;
   padding: 1%;
   background-color: white;
}

.footer {
    background-color: aqua;
    height: 50px;
}

.video iframe {
    width: 65%;
    margin: 10px;
    float: left;
}

.video::after {
  content: '';
  display: block;
  clear: both;
}

  <div class="container">

  <div class="content">

    <div class="video">
        <iframe width="560" height="560" src="https://www.youtube.com/embed/vC130RwBJQ8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        <h3>test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. Ut porttitor leo a diam sollicitudin tempor. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Orci eu lobortis elementum nibh tellus. Nam at lectus urna duis convallis convallis tellus id. Tellus id interdum velit laoreet id donec. Nunc faucibus a pellentesque sit amet porttitor </p>

   </div> <!-- end of video -->

 </div> <!-- end of content -->

<footer class="footer">test</footer>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。