Question

以下代码说明了问题所在。不要过多地阅读多余的样式和宽度，但它们就是一个例子。

我希望将图像浮动到h2和section元素的左侧，但由于{{1}的方式，这不会像浮点一样被解决容器工作。

我控制了所有相关元素，但我希望保持设计精神不受影响。

＆＃13;

aside

＆＃13;

.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;
}

＆＃13;

Answer 1

更改标记，使图像位于内容之前，然后将样式应用于图像元素，如下所示：

＆＃13;

.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;
}

＆＃13;

<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="#">StackOverflow</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>

＆＃13;

浮动元素内浮动图像

1 个答案: