响应式 CSS 浮动以垂直对齐，顶部没有任何白色 space
Responsive CSS floats to align vertically without any white space on top
我正在创建响应式网页。我有两篇文章向左浮动，两篇旁白向右浮动。我希望这两个旁白在顶部与第一篇文章垂直对齐。最初旁白与文章完全一致，如 HTML 我将旁白放在两篇文章之间。
但是当页面响应时，我发现当我试图将旁白折叠到页面底部，文章下方时，当我想让旁白显示时，它们出现在两篇文章的中间在两篇文章的下面。所以我把旁白移到了我的HTML页面的底部，这样我的问题就产生了。
我试图清除浮动并使用内联块显示文章和旁白，但我无法使其工作。
编辑：有人建议（然后删除他们的回复？）绝对定位旁白。我试过这样做，但我觉得它会扰乱响应式设计，所以我想尽可能避免它。
这里是 JSfiddle.
@charset"utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of CSS reset */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* General styles */
/* Background pattern from Subtle Patterns, by Atle Mo: http://subtlepatterns.com/green-cup/ */
body {
line-height: 1.4;
background-image: url(../images/green_cup.png);
}
.wrapper {
width: 960px;
/* 960px; */
margin: 0 auto;
}
/* Header styles */
header {
font-family:'Playfair Display', serif;
font-size: 23px;
}
.header-text {
margin: 0 auto;
width: 800px;
font-family:'Playfair Display', serif;
text-align: center;
color: #1d464f;
font-size: 2.1em;
/* 50px; */
}
.header-text-below {
margin: 0 auto;
width: 800px;
text-align: center;
font-family:'Merriweather', serif;
font-size: 1.1em;
/* 25px; */
color: #256139;
padding-bottom: 10px;
}
/* End Header styles */
/* Nav */
nav {
width: 100%;
background-color: white;
border-bottom: 4px solid #78605C;
height: 60px;
}
nav ul {
padding-top: 7px;
margin-left: 19%;
}
nav li {
float: left;
display: block;
text-align: center;
list-style-type: none;
width: 19%;
}
nav a {
display: block;
font-family:'Playfair Display', serif;
color: #2A879C;
text-decoration: none;
font-size: 30px;
}
nav a:hover, nav a:focus, nav a:active {
color: #78605C;
}
/* Typography */
h1 {
color: #1d464f;
}
.article-header {
color: #1d464f;
padding-top: 4px;
font-size: 35px;
}
p {
font-family:'Merriweather', serif;
line-height: 1.4em;
font-size: 1em;
}
.date-circle {
font-family:'Merriweather', serif;
border-radius: 50%;
background-color: #78605C;
color: white;
height: 60px;
width: 60px;
float: left;
font-size: 14px;
text-align: center;
padding-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
clear: both;
}
.read-more a {
color: #78605C;
font-family:'Merriweather', serif;
text-decoration: none;
font-weight: bold;
}
.featured {
color: #256139;
font-family:'Merriweather', serif;
font-weight: bold;
font-size: 20px;
}
/* End Typography */
img {
max-width: 100%;
height: auto;
}
/* Articles */
article {
float: left;
display: inline-block;
width: 67.39%;
/* 620px / 960px = 67.39%, target / context = result */
padding: 10px;
padding-top: 10px;
background-color: white;
}
article:nth-of-type(2) {
margin-bottom: 20px;
}
.clear {
clear: left;
}
/* Borders of articles and asides */
article:nth-of-type(1) {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
article:nth-of-type(2) {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
aside:nth-of-type(1) {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
aside:nth-of-type(2) {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
/* End borders */
/* Aside, right side div */
aside {
float: right;
width: 31.25%;
/* 300px / 960px = 31.25%, target / context = result */
padding: 10px;
padding-top: 10px;
background-color: white;
}
/* Font awesome styling, social media icons from: http://fortawesome.github.io/Font-Awesome/ */
.iconContact {
width: 235px;
margin: 0 auto;
}
.iconContact a {
color: #2A879C;
transition: color 0.3s ease;
text-align: center;
float: left;
display: inline-block;
padding: 10px;
}
.iconContact a:hover {
color: #78605C;
}
/* Media queries
Your blog web page should be usable at the following sizes at a minimum:
i. Smartphone – portrait (320px wide)
ii. Smartphone – landscape (480px wide)
iii. Tablet – portrait (768px wide)
iv. Tablet – landscape(1024px wide)
v. Desktop – widths wider than 1024px
*/
@media only screen and (max-width: 1080px) {
main {
width: 90%;
margin: 0 auto;
}
.article-header {
padding-top: 8px;
font-size: 1.2em;
/* 35px; */
}
@media only screen and (max-width: 980px) {
.wrapper {
width: 80%;
/* 960px; */
margin: 0 auto;
}
nav ul {
padding-top: 7px;
margin-left: 0;
}
nav li {
float: left;
display: block;
text-align: center;
list-style-type: none;
width: 25%;
}
.header-text {
margin: 0 auto;
width: 80%;
/* 800px; */
font-family:'Playfair Display', serif;
text-align: center;
color: #1d464f;
font-size: 2.1em;
/* 50px; */
}
.header-text-below {
margin: 0 auto;
width: 80%;
/* 800px; */
text-align: center;
font-family:'Merriweather', serif;
font-size: 1.1em;
/* 25px; */
color: #256139;
padding-bottom: 10px;
}
main {
width: 100%;
margin: 0 auto;
}
.article-header {
padding-top: 8px;
font-size: 1.2em;
/* 35px; */
}
.iconContact a {
padding: 6px;
}
}
@media only screen and (max-width: 920px) {
.iconContact a {
padding: 4px;
}
}
@media only screen and (max-width: 890px) {
.header-text-below {
font-size: 1em;
/* 25px; */
}
}
@media only screen and (max-width: 860px) {
.iconContact a {
padding: 3px;
}
@media only screen and (max-width: 830px) {
.iconContact a {
padding: 2px;
}
}
@media only screen and (max-width: 800px) {
.header-text-below {
font-size: 0.9em;
/* 25px; */
}
.iconContact a {
padding: 1px;
}
@media only screen and (max-width: 890px) {
.header-text-below {
font-size: 1em;
/* 25px; */
}
}
@media only screen and (max-width: 768px) {
aside {
float: none;
width: 100%;
}
article {
width: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A Healthy Zest; A food blog begins</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<!-- Responsive media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Recipes</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1 class="header-text"> A Healthy Zest </h1>
<h2 class="header-text-below"> Carefully curated recipes for those on the go </h2>
</header>
<main>
<!-- Articles, left hand side -->
<article>
<header>
<div class="date-circle">May 02</div>
<h1 class="article-header">Organic Italian pizza</h1>
</header>
<!--- Image in blog post, figure -->
<figure>
<img src="images/pizza-600.jpg" alt="Delicious Italian Cheese and Tomato Pizza" width="600" height="400">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique. Suspendisse ultrices iaculis eros sed molestie. Nulla eget ante eleifend, vulputate nunc in, congue orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin id tellus dolor. Aenean maximus eros porttitor erat consequat, vel iaculis dui faucibus. Vestibulum aliquet lorem at mi pretium ultricies. Suspendisse tempor pulvinar rutrum. Morbi consequat eget nunc id lobortis. Pellentesque ut tincidunt lectus. In hac habitasse platea dictumst. Duis gravida neque sit amet nunc vestibulum, non interdum ante dictum. Fusce semper pharetra lectus nec auctor. Sed dignissim cursus leo, et porttitor sem porta quis. Etiam facilisis volutpat neque, vitae rutrum purus fermentum vitae. Donec sed nunc dolor. Sed sed rutrum mi. Sed malesuada lobortis aliquet. Praesent vel nisl in massa dictum varius. Nullam nec magna arcu. Vivamus at dolor id neque iaculis rhoncus. Suspendisse aliquet libero felis, vitae tincidunt lectus placerat a. Duis a dictum lacus. Donec ut libero diam. Phasellus scelerisque mattis felis, ut malesuada neque pellentesque et. In arcu sem, convallis ac fermentum sed, consequat et tellus. Donec eu orci quis sapien aliquet porttitor sit amet eu metus. Etiam non sodales risus. Suspendisse placerat sem eu dolor porta tempor.</p>
<p class="read-more"> <a href="#"> Read more...</a>
</p>
</article>
<article>
<header>
<div class="date-circle">April 08</div>
<h1 class="article-header">Healthy whole-grain sandwich</h1>
</header>
<!--- Image in blog post, figure -->
<figure>
<img src="images/sandwich-600.jpg" alt="Healthy sandwich with lettuce, egg and cream cheese" width="600" height="400">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique. Suspendisse ultrices iaculis eros sed molestie. Nulla eget ante eleifend, vulputate nunc in, congue orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin id tellus dolor. Aenean maximus eros porttitor erat consequat, vel iaculis dui faucibus. Vestibulum aliquet lorem at mi pretium ultricies. Suspendisse tempor pulvinar rutrum. Morbi consequat eget nunc id lobortis. Pellentesque ut tincidunt lectus. In hac habitasse platea dictumst. Duis gravida neque sit amet nunc vestibulum, non interdum ante dictum. Fusce semper pharetra lectus nec auctor. Sed dignissim cursus leo, et porttitor sem porta quis. Etiam facilisis volutpat neque, vitae rutrum purus fermentum vitae. Donec sed nunc dolor. Sed sed rutrum mi. Sed malesuada lobortis aliquet. Praesent vel nisl in massa dictum varius. Nullam nec magna arcu. Vivamus at dolor id neque iaculis rhoncus. Suspendisse aliquet libero felis, vitae tincidunt lectus placerat a. Duis a dictum lacus. Donec ut libero diam. Phasellus scelerisque mattis felis, ut malesuada neque pellentesque et. In arcu sem, convallis ac fermentum sed, consequat et tellus. Donec eu orci quis sapien aliquet porttitor sit amet eu metus. Etiam non sodales risus. Suspendisse placerat sem eu dolor porta tempor.</p>
<p class="read-more">
<a href="#">Read more...</a>
</p>
</article>
<!-- Aside, right sidebar, author bio-->
<aside>
<!-- Social media icons -->
<div class="iconContact">
<a href="#">
<i class="fa fa-facebook fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-twitter fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-instagram fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-pinterest fa-3x"></i>
</a>
</div>
<!-- Social media icons end -->
<figure>
<img src="images/author-300.png" alt="Picture of the author of the food blog" width="300" height="294">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique.</p>
</aside>
<!-- Aside, right sidebar, featured posts -->
<aside>
<h1 class="featured">Featured Posts</h1>
<a href="#">
<figure>
<img src="images/smoothie-300.jpg" alt="Delicious Green Smoothie with bananas and strawberries on the side" width="300" height="200">
</figure>
</a>
<a href="#">
<figure>
<img src="images/oatmeal-300.jpg" alt="Healthy oatmeal with bananas and nuts sprinkled on top" width="300" height="200">
</figure>
</a>
</aside>
<div class="clear"></div>
</div>
<!-- end wrapper -->
</main>
<footer class="clear"></footer>
</body>
</html>
我建议使用灵活的盒子模型来完成你想要的。
删除所有浮动。
将包含元素 <main> 变成 flexbox 容器：
main {
display: flex;
}
将所有左侧内容放入 <div id="left">，将所有右侧内容放入 <div id="right">。
现在让我们从这些 div 中删除增长和收缩属性：
#left, #right {
flex-grow: 0;
flex-shrink: 0;
}
现在，当您想要使用移动布局时，您可以将媒体查询设置为 flex-direction: column; 和 flex-grow: 1;，您的右侧内容将下拉到左侧内容下方。
您可能需要将您赋予每篇文章的一些属性移到它们各自的 left/right 列标签中。
这是一个jsfiddle
我正在创建响应式网页。我有两篇文章向左浮动，两篇旁白向右浮动。我希望这两个旁白在顶部与第一篇文章垂直对齐。最初旁白与文章完全一致，如 HTML 我将旁白放在两篇文章之间。
但是当页面响应时，我发现当我试图将旁白折叠到页面底部，文章下方时，当我想让旁白显示时，它们出现在两篇文章的中间在两篇文章的下面。所以我把旁白移到了我的HTML页面的底部，这样我的问题就产生了。
我试图清除浮动并使用内联块显示文章和旁白，但我无法使其工作。
编辑：有人建议（然后删除他们的回复？）绝对定位旁白。我试过这样做，但我觉得它会扰乱响应式设计，所以我想尽可能避免它。
这里是 JSfiddle.
@charset"utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of CSS reset */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* General styles */
/* Background pattern from Subtle Patterns, by Atle Mo: http://subtlepatterns.com/green-cup/ */
body {
line-height: 1.4;
background-image: url(../images/green_cup.png);
}
.wrapper {
width: 960px;
/* 960px; */
margin: 0 auto;
}
/* Header styles */
header {
font-family:'Playfair Display', serif;
font-size: 23px;
}
.header-text {
margin: 0 auto;
width: 800px;
font-family:'Playfair Display', serif;
text-align: center;
color: #1d464f;
font-size: 2.1em;
/* 50px; */
}
.header-text-below {
margin: 0 auto;
width: 800px;
text-align: center;
font-family:'Merriweather', serif;
font-size: 1.1em;
/* 25px; */
color: #256139;
padding-bottom: 10px;
}
/* End Header styles */
/* Nav */
nav {
width: 100%;
background-color: white;
border-bottom: 4px solid #78605C;
height: 60px;
}
nav ul {
padding-top: 7px;
margin-left: 19%;
}
nav li {
float: left;
display: block;
text-align: center;
list-style-type: none;
width: 19%;
}
nav a {
display: block;
font-family:'Playfair Display', serif;
color: #2A879C;
text-decoration: none;
font-size: 30px;
}
nav a:hover, nav a:focus, nav a:active {
color: #78605C;
}
/* Typography */
h1 {
color: #1d464f;
}
.article-header {
color: #1d464f;
padding-top: 4px;
font-size: 35px;
}
p {
font-family:'Merriweather', serif;
line-height: 1.4em;
font-size: 1em;
}
.date-circle {
font-family:'Merriweather', serif;
border-radius: 50%;
background-color: #78605C;
color: white;
height: 60px;
width: 60px;
float: left;
font-size: 14px;
text-align: center;
padding-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
clear: both;
}
.read-more a {
color: #78605C;
font-family:'Merriweather', serif;
text-decoration: none;
font-weight: bold;
}
.featured {
color: #256139;
font-family:'Merriweather', serif;
font-weight: bold;
font-size: 20px;
}
/* End Typography */
img {
max-width: 100%;
height: auto;
}
/* Articles */
article {
float: left;
display: inline-block;
width: 67.39%;
/* 620px / 960px = 67.39%, target / context = result */
padding: 10px;
padding-top: 10px;
background-color: white;
}
article:nth-of-type(2) {
margin-bottom: 20px;
}
.clear {
clear: left;
}
/* Borders of articles and asides */
article:nth-of-type(1) {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
article:nth-of-type(2) {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
aside:nth-of-type(1) {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
aside:nth-of-type(2) {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #DED8AA;
border-width: 4px;
}
/* End borders */
/* Aside, right side div */
aside {
float: right;
width: 31.25%;
/* 300px / 960px = 31.25%, target / context = result */
padding: 10px;
padding-top: 10px;
background-color: white;
}
/* Font awesome styling, social media icons from: http://fortawesome.github.io/Font-Awesome/ */
.iconContact {
width: 235px;
margin: 0 auto;
}
.iconContact a {
color: #2A879C;
transition: color 0.3s ease;
text-align: center;
float: left;
display: inline-block;
padding: 10px;
}
.iconContact a:hover {
color: #78605C;
}
/* Media queries
Your blog web page should be usable at the following sizes at a minimum:
i. Smartphone – portrait (320px wide)
ii. Smartphone – landscape (480px wide)
iii. Tablet – portrait (768px wide)
iv. Tablet – landscape(1024px wide)
v. Desktop – widths wider than 1024px
*/
@media only screen and (max-width: 1080px) {
main {
width: 90%;
margin: 0 auto;
}
.article-header {
padding-top: 8px;
font-size: 1.2em;
/* 35px; */
}
@media only screen and (max-width: 980px) {
.wrapper {
width: 80%;
/* 960px; */
margin: 0 auto;
}
nav ul {
padding-top: 7px;
margin-left: 0;
}
nav li {
float: left;
display: block;
text-align: center;
list-style-type: none;
width: 25%;
}
.header-text {
margin: 0 auto;
width: 80%;
/* 800px; */
font-family:'Playfair Display', serif;
text-align: center;
color: #1d464f;
font-size: 2.1em;
/* 50px; */
}
.header-text-below {
margin: 0 auto;
width: 80%;
/* 800px; */
text-align: center;
font-family:'Merriweather', serif;
font-size: 1.1em;
/* 25px; */
color: #256139;
padding-bottom: 10px;
}
main {
width: 100%;
margin: 0 auto;
}
.article-header {
padding-top: 8px;
font-size: 1.2em;
/* 35px; */
}
.iconContact a {
padding: 6px;
}
}
@media only screen and (max-width: 920px) {
.iconContact a {
padding: 4px;
}
}
@media only screen and (max-width: 890px) {
.header-text-below {
font-size: 1em;
/* 25px; */
}
}
@media only screen and (max-width: 860px) {
.iconContact a {
padding: 3px;
}
@media only screen and (max-width: 830px) {
.iconContact a {
padding: 2px;
}
}
@media only screen and (max-width: 800px) {
.header-text-below {
font-size: 0.9em;
/* 25px; */
}
.iconContact a {
padding: 1px;
}
@media only screen and (max-width: 890px) {
.header-text-below {
font-size: 1em;
/* 25px; */
}
}
@media only screen and (max-width: 768px) {
aside {
float: none;
width: 100%;
}
article {
width: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A Healthy Zest; A food blog begins</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<!-- Responsive media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Recipes</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1 class="header-text"> A Healthy Zest </h1>
<h2 class="header-text-below"> Carefully curated recipes for those on the go </h2>
</header>
<main>
<!-- Articles, left hand side -->
<article>
<header>
<div class="date-circle">May 02</div>
<h1 class="article-header">Organic Italian pizza</h1>
</header>
<!--- Image in blog post, figure -->
<figure>
<img src="images/pizza-600.jpg" alt="Delicious Italian Cheese and Tomato Pizza" width="600" height="400">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique. Suspendisse ultrices iaculis eros sed molestie. Nulla eget ante eleifend, vulputate nunc in, congue orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin id tellus dolor. Aenean maximus eros porttitor erat consequat, vel iaculis dui faucibus. Vestibulum aliquet lorem at mi pretium ultricies. Suspendisse tempor pulvinar rutrum. Morbi consequat eget nunc id lobortis. Pellentesque ut tincidunt lectus. In hac habitasse platea dictumst. Duis gravida neque sit amet nunc vestibulum, non interdum ante dictum. Fusce semper pharetra lectus nec auctor. Sed dignissim cursus leo, et porttitor sem porta quis. Etiam facilisis volutpat neque, vitae rutrum purus fermentum vitae. Donec sed nunc dolor. Sed sed rutrum mi. Sed malesuada lobortis aliquet. Praesent vel nisl in massa dictum varius. Nullam nec magna arcu. Vivamus at dolor id neque iaculis rhoncus. Suspendisse aliquet libero felis, vitae tincidunt lectus placerat a. Duis a dictum lacus. Donec ut libero diam. Phasellus scelerisque mattis felis, ut malesuada neque pellentesque et. In arcu sem, convallis ac fermentum sed, consequat et tellus. Donec eu orci quis sapien aliquet porttitor sit amet eu metus. Etiam non sodales risus. Suspendisse placerat sem eu dolor porta tempor.</p>
<p class="read-more"> <a href="#"> Read more...</a>
</p>
</article>
<article>
<header>
<div class="date-circle">April 08</div>
<h1 class="article-header">Healthy whole-grain sandwich</h1>
</header>
<!--- Image in blog post, figure -->
<figure>
<img src="images/sandwich-600.jpg" alt="Healthy sandwich with lettuce, egg and cream cheese" width="600" height="400">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique. Suspendisse ultrices iaculis eros sed molestie. Nulla eget ante eleifend, vulputate nunc in, congue orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin id tellus dolor. Aenean maximus eros porttitor erat consequat, vel iaculis dui faucibus. Vestibulum aliquet lorem at mi pretium ultricies. Suspendisse tempor pulvinar rutrum. Morbi consequat eget nunc id lobortis. Pellentesque ut tincidunt lectus. In hac habitasse platea dictumst. Duis gravida neque sit amet nunc vestibulum, non interdum ante dictum. Fusce semper pharetra lectus nec auctor. Sed dignissim cursus leo, et porttitor sem porta quis. Etiam facilisis volutpat neque, vitae rutrum purus fermentum vitae. Donec sed nunc dolor. Sed sed rutrum mi. Sed malesuada lobortis aliquet. Praesent vel nisl in massa dictum varius. Nullam nec magna arcu. Vivamus at dolor id neque iaculis rhoncus. Suspendisse aliquet libero felis, vitae tincidunt lectus placerat a. Duis a dictum lacus. Donec ut libero diam. Phasellus scelerisque mattis felis, ut malesuada neque pellentesque et. In arcu sem, convallis ac fermentum sed, consequat et tellus. Donec eu orci quis sapien aliquet porttitor sit amet eu metus. Etiam non sodales risus. Suspendisse placerat sem eu dolor porta tempor.</p>
<p class="read-more">
<a href="#">Read more...</a>
</p>
</article>
<!-- Aside, right sidebar, author bio-->
<aside>
<!-- Social media icons -->
<div class="iconContact">
<a href="#">
<i class="fa fa-facebook fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-twitter fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-instagram fa-3x"></i>
</a>
</div>
<div class="iconContact">
<a href="#">
<i class="fa fa-pinterest fa-3x"></i>
</a>
</div>
<!-- Social media icons end -->
<figure>
<img src="images/author-300.png" alt="Picture of the author of the food blog" width="300" height="294">
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat lectus quis tellus venenatis pellentesque. Vestibulum et aliquam ipsum. Suspendisse dapibus nibh arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere urna ut tortor vulputate porttitor. Maecenas eget ultrices felis, at luctus justo. Etiam blandit placerat lacus vel tristique.</p>
</aside>
<!-- Aside, right sidebar, featured posts -->
<aside>
<h1 class="featured">Featured Posts</h1>
<a href="#">
<figure>
<img src="images/smoothie-300.jpg" alt="Delicious Green Smoothie with bananas and strawberries on the side" width="300" height="200">
</figure>
</a>
<a href="#">
<figure>
<img src="images/oatmeal-300.jpg" alt="Healthy oatmeal with bananas and nuts sprinkled on top" width="300" height="200">
</figure>
</a>
</aside>
<div class="clear"></div>
</div>
<!-- end wrapper -->
</main>
<footer class="clear"></footer>
</body>
</html>
我建议使用灵活的盒子模型来完成你想要的。
删除所有浮动。
将包含元素 <main> 变成 flexbox 容器：
main {
display: flex;
}
将所有左侧内容放入 <div id="left">，将所有右侧内容放入 <div id="right">。
现在让我们从这些 div 中删除增长和收缩属性：
#left, #right {
flex-grow: 0;
flex-shrink: 0;
}
现在，当您想要使用移动布局时，您可以将媒体查询设置为 flex-direction: column; 和 flex-grow: 1;，您的右侧内容将下拉到左侧内容下方。
您可能需要将您赋予每篇文章的一些属性移到它们各自的 left/right 列标签中。
这是一个jsfiddle