当在浮动元素内时浮动图像

Float Images When Inside Floated Elements

下面的代码说明了这个问题。不要过度解读多余的样式和宽度,但它们只是为了示例。

我想将图像浮动到 h2section 元素的左侧,但这不会像浮动一样简单地解决,因为 aside 容器工作。

我可以控制所有涉及的元素,但我想保持设计的精神完整。

.bottom {
  background-color: #dfdfdf;
}
h2,
p {
  margin: 0;
}
ol,
ul {
  list-style-type: none;
  padding: 0;
}
img {
  height: 5em;
  width: 5em;
}
aside {
  box-sizing: border-box;
  padding: .5em;
}
.recent-articles {
  background-color: #eee;
  float: left;
  width: 60%;
}
.links {
  float: right;
  width: 40%;
}
address {
  background-color: #dfdfdf;
  clear: both;
  text-align: right;
}
address a {
  color: black;
  font-style: normal;
}
<footer class="bottom">
  <aside class="recent-articles">
    <h1>Recent Articles</h1>
    <ol>
      <li>
        <article>
          <h2><a href="#">Article 1</a></h2>
          <section class="post-summary">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </section>
          <aside class="article-image">
            <a href="#">
              <img src="http://upload.wikimedia.org/wikipedia/commons/a/a7/Mvc-017x_(square).jpg">
            </a>
          </aside>
        </article>
        <li>
          <article>
            <h2><a href="#">Article 2: Electric Boogaloo</a></h2>
            <section class="post-summary">
              <p>Aenean id neque nulla. Morbi a pharetra neque. Proin vehicula, orci placerat luctus pulvinar, urna felis viverra ex, a vulputate lorem risus eu dolor</p>
            </section>
            <aside class="article-image">
              <a href="#">
                <img src="http://upload.wikimedia.org/wikipedia/commons/5/56/Parasagittal_MRI_of_human_head_in_patient_with_benign_familial_macrocephaly_prior_to_brain_injury_(ANIMATED).gif">
              </a>
            </aside>
          </article>
          <li>
            <article>
              <h2><a href="#">Article Title the Third</a></h2>
              <section class="post-summary">
                <p>Etiam auctor ipsum non erat viverra, eu condimentum sapien egestas.</p>
              </section>
              <aside class="article-image">
                <a href="#">
                  <img src="http://upload.wikimedia.org/wikipedia/commons/8/86/No_ecb_mode_picture.png">
                </a>
              </aside>
            </article>
    </ol>
  </aside>
  <aside class="links">
    <h1>Other Sites</h1>
    <ul>
      <li><a href="#">Whosebug</a> (If this goes down, panic)
        <li><a href="#">DuckDuckGo</a> (Like Google, but with Anatidae)
          <li><a href="#">IRS</a> (Don't forget to file)
    </ul>
  </aside>
  <address class="credits">
        <a href="#">This site: isn't really a whole site, &copy; never</a>
    </address>
</footer>

更改标记,使图像出现在内容之前,然后将样式应用于图像元素,如下所示:

.article-image img {
  float: left;
  margin-right: 20px;
}
article {
  overflow: hidden;
}
.bottom {
  background-color: #dfdfdf;
}
h2,
p {
  margin: 0;
}
ol,
ul {
  list-style-type: none;
  padding: 0;
}
img {
  height: 5em;
  width: 5em;
}
aside {
  box-sizing: border-box;
  padding: .5em;
}
.recent-articles {
  background-color: #eee;
  float: left;
  width: 60%;
}
.links {
  float: right;
  width: 40%;
}
address {
  background-color: #dfdfdf;
  clear: both;
  text-align: right;
}
address a {
  color: black;
  font-style: normal;
}
<footer class="bottom">
  <aside class="recent-articles">
    <h1>Recent Articles</h1>
    <ol>
      <li>
        <article>
          <aside class="article-image">
            <a href="#">
              <img src="http://upload.wikimedia.org/wikipedia/commons/a/a7/Mvc-017x_(square).jpg">
            </a>
          </aside>
          <h2><a href="#">Article 1</a></h2>
          <section class="post-summary">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </section>
        </article>
        <li>
          <article>
            <aside class="article-image">
              <a href="#">
                <img src="http://upload.wikimedia.org/wikipedia/commons/5/56/Parasagittal_MRI_of_human_head_in_patient_with_benign_familial_macrocephaly_prior_to_brain_injury_(ANIMATED).gif">
              </a>
            </aside>
            <h2><a href="#">Article 2: Electric Boogaloo</a></h2>
            <section class="post-summary">
              <p>Aenean id neque nulla. Morbi a pharetra neque. Proin vehicula, orci placerat luctus pulvinar, urna felis viverra ex, a vulputate lorem risus eu dolor</p>
            </section>
          </article>
          <li>
            <article>
              <aside class="article-image">
                <a href="#">
                  <img src="http://upload.wikimedia.org/wikipedia/commons/8/86/No_ecb_mode_picture.png">
                </a>
              </aside>
              <h2><a href="#">Article Title the Third</a></h2>
              <section class="post-summary">
                <p>Etiam auctor ipsum non erat viverra, eu condimentum sapien egestas.</p>
              </section>
            </article>
    </ol>
  </aside>
  <aside class="links">
    <h1>Other Sites</h1>
    <ul>
      <li><a href="#">Whosebug</a> (If this goes down, panic)
        <li><a href="#">DuckDuckGo</a> (Like Google, but with Anatidae)
          <li><a href="#">IRS</a> (Don't forget to file)
    </ul>
  </aside>
  <address class="credits">
        <a href="#">This site: isn't really a whole site, &copy; never</a>
    </address>
</footer>