当在浮动元素内时浮动图像
Float Images When Inside Floated Elements
下面的代码说明了这个问题。不要过度解读多余的样式和宽度,但它们只是为了示例。
我想将图像浮动到 h2
和 section
元素的左侧,但这不会像浮动一样简单地解决,因为 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, © 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, © never</a>
</address>
</footer>
下面的代码说明了这个问题。不要过度解读多余的样式和宽度,但它们只是为了示例。
我想将图像浮动到 h2
和 section
元素的左侧,但这不会像浮动一样简单地解决,因为 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, © 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, © never</a>
</address>
</footer>