html - 当 img 标签放在里面时，Aside 标签不会向左浮动

Question

我有我的 aside 标签，它漂浮在我的 section 标签旁边，如果没有 img 标签或里面只有文本就可以了，但其他方面我不能 float 留给工作或内联 block ，什么都没有!我很难过。有谁知道我将如何解决这个问题？我向左或向右漂浮并不重要。它不会随着标签内的 img 移动

  section{
  border-style: double;
  border-color: yellow;
  float:left;
}
.news-feed{
  border-style: double;
  border-color: cyan;
  float: left;
}
img{
  border-style: double;
  border-color: white;
  float: left;
}
.summary{
  border-style: double;
  border-color: purple;
  float: left;
}
aside{
  opacity: 1;
  border-style: double;
  border-color: red;
  float: left;
}

  <section>
    <h2>Explore New Videos!</h2>
    <iframe width="700" height="397" src="LINK" frameborder="0" allowfullscreen >
    </iframe>
  </section>
  <aside>
    <div class = "news-feed">
        <img src="images/bg2.jpg" height="15%" width="5%">
        <div class = "summary">
          <p>This is text</p>
        </div>
    </div>
  </aside>

CSS for color mapp

Answer 1

您只需将 width 值应用于 section 和 aside 两个元素。使用百分比值将授予响应式布局:

 section{
  border-style: double;
  border-color: yellow;
  float:left;
  width: 70%;
}
.news-feed{
  border-style: double;
  border-color: cyan;
  float: left;
}
img{
  border-style: double;
  border-color: white;
  float: left;
}
.summary{
  border-style: double;
  border-color: purple;
  float: left;
}
aside{
  opacity: 1;
  border-style: double;
  border-color: red;
  float: left;
  width: 25%;
}

  <section>
    <h2>Explore New Videos!</h2>
    <iframe width="700" height="397" src="https://unsplash.it/200" frameborder="0" allowfullscreen >
    </iframe>
  </section>
  <aside>
    <div class = "news-feed">
        <img src="https://unsplash.it/700" height="15%" width="5%">
        <div class = "summary">
          <p>This is text</p>
        </div>
    </div>
  </aside>