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

Question

每当我尝试在创建的 div 元素中呈现 YouTube 嵌入时，视频都会超出我创建的 div 的范围。

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

- 规则不能放在 HTML 代码中，它们必须采用 sheet

样式

-已在样式 sheet 中设置的规则在作业中概述（包括浮动）。

Local render

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>

Answer 1

您需要清除 .video div 中浮动的 iframe。在不编辑 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>

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

Unable to house iframe within div element - HTML and CSS

html

css

iframe

css-float