调整大小时浮动 div

Question

我已经尝试找到解决问题的方法，但无济于事。

我有一个使用媒体查询创建的网站。在这个项目中，除了纯 HTML 和 CSS，我不能使用任何其他东西，这就是为什么为了保持设计干净，我在某些宽度上隐藏了一些 div（我指的是 [=例如右上角的45=]按钮）。

重现问题：

调整 window 的大小，使 'play' 按钮消失。
回到初始宽度。

不幸的是，这个问题是随机出现的，有时一切都很完美，有时却每次都出现。我已经能够使用 Safari 9.0.1 和 Google Chrome 46.0.2490.86 运行在 OS X Yosemite 10.11.1 上重现它。

请在下面找到解释问题的图片：

How it's supposed to look

How it looks upon resizing back

提前感谢您的帮助！

代码：

body 
{
 font-family: 'Open Sans', sans-serif;
 font-size: 13px;
 color: #7d7d7d;
 background-color: #f0f3f6;
 margin: 0 auto;
 max-width: 1200px;
}

a:link, a:visited
{
 color: #e88d8a;
 text-decoration: none;
}

a:hover, a:active
{
 color: #dd5555;
}

.container 
{
 margin: 0px 15px 30px 15px;
}

aside 
{
 width: 25%;
 float: left;
}

section 
{
 width: 75%;
 float: left;
}

header
{
 color: #ffffff;
 background-color: #dd5555;
 font-size: 1.15em;
 font-weight: bold;
 text-transform: uppercase;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 padding: 15px 15px 15px 20px;
}

h3
{
 color: #dd5555;
}

.profile 
{
 text-align: center;
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 padding: 30px 30px 20px 30px;
 margin: 30px 15px 0px 15px;
}

.img-circle 
{
    border-radius: 50%;
    width: 100%;
    max-width: 200px;
}

.img-rounded
{
 -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.profile-info
{
 margin-bottom: 10px;
}

.name
{
 color: #dd5555;
 font-size: 1.2em;
 font-weight: bold;
 margin: 20px 0px 5px 0px;
}

.social-icons i
{
 display: inline-block;
 padding: 10px;
}

.social-icons a:link, .social-icons a:visited
{
 color: #e88d8a;
 text-decoration: none;
}

.social-icons a:hover, .social-icons a:active
{
 color: #dd5555;
}

nav 
{
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 margin: 30px 15px 0px 15px;
}

.nav-content ul 
{
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    margin: 0;
}

.nav-content i
{
 width: 15px;
 margin-right: 15px;
}

.nav-content a:link, .nav-content a:visited
{
 display: block;
 color: #e88d8a;
 font-size: 1.14em;
 font-weight: 600;
 text-decoration: none;
 padding: 10px 20px 10px 20px;
}

.nav-content a:hover, .nav-content a:active
{
 color: #dd5555;
}

.quote 
{
 display: flex;
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 margin: 30px 15px 30px 15px;
}

blockquote
{
 background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
 background-size: 30px 30px;
 min-height:30px;
 padding: 5px 30px 0 30px;
 margin: 0px;
}

.quote-left 
{
 text-align: center;
 float: left;
 width: 450px;
 padding: 20px 50px 20px 35px;
}

.quote-right 
{
 float: left;
 padding: 20px 25px 10px 0px;
}

.quote-right-768
{
 display: none;
}

.track-title
{
 color: #dd5555;
 font-size: 1.2em;
 font-weight: bold;
}

.track-title-link
{
 display: none;
 color: #dd5555;
 font-size: 1.2em;
 font-weight: bold;
}

.track-title-link a:link, .track-title-link a:visited
{
 color: #e88d8a;
 text-decoration: none;
}

.track-title-link a:hover, .track-title-link a:active
{
 color: #dd5555;
}

.play
{
 float: left;
 margin: 10px 10px 10px 0;
}

.play a:link, .play a:visited
{
 color: #7d7d7d;
 text-decoration: none;
}

.play a:hover, .play a:active
{
 color: #dd5555;
}

.artist-album
{
 float: left;
 padding: 10px 10px 0px 0px;
}

.artist-album span
{
 font-weight: bold;
}

.content 
{
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 clear: both;
 margin: 0px 15px;
}

article 
{
 padding: 2px 20px 4px 20px;
}

.gallery
{
 text-align: center;
 margin: 15px;
}

.links
{
 font-weight: 600;
 margin: 15px 15px 15px 20px;
}

.links ul
{
 list-style-type: none;
    padding: 0;
    margin: 0;
}

.links li
{
 margin-bottom: 5px;
}

.floating-box 
{
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px; 
}

.responsive-container 
{
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.responsive-container iframe 
{
 position: absolute;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
}

.clear
{
 clear: both;
}

footer 
{
 color: #7d7d7d;
 text-align: center;
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 margin: 30px 15px 0px 15px;
 padding: 15px 0px 15px 0px;
}

footer > br 
{
 display: none;
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) 
{
 aside 
 {
  width: 25%;
 }
 
 section 
 {
  width: 75%;
 }
 
 .quote-right
 {
  padding: 20px 25px 20px 0px;
 }
 
 .track-title
 {
  display: none;
 }
 
 .track-title-link
 {
  display: inline-block;
 }
 
 .play
 {
  display: none;
 }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1080px) 
{
 aside 
 {
  width: 30%;
 }
 
 section 
 {
  width: 70%;
 }
 
 .quote-left
 {
  padding: 20px 20px 20px 15px;
 }
 
 .quote-right
 {
  display: none;
 }
 
 .quote-right-768
 {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) 
{
 aside 
 {
  width: 35%;
 }
 
 section 
 {
  width: 65%;
 }
 
 .quote-left
 {
  padding: 20px 20px 20px 15px;
 }
 
 .quote-right
 {
  display: none;
 }
 
 .quote-right-768
 {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
}

/* Custom, BlackBerry Playbook */ 
@media only screen and (max-width : 600px) 
{
 aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 10px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .track-title
 {
  display: block;
 }
 
 .track-title-link
 {
  display: none;
 }
 
 .play
 {
  display: inline-block;
 }
 
 footer > br
 {
  display: inline-block;
 }
}

/* Custom, iPhone 6 */ 
@media only screen and (max-width : 375px) 
{
    aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 10px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .track-title
 {
  display: block;
 }
 
 .play
 {
  display: inline-block;
 }
 
 footer > br
 {
  display: inline-block;
 }
}

/* Custom, Blackberry Z30 */ 
@media only screen and (max-width : 360px) 
{
    aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 20px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .track-title
 {
  display: none;
 }
 
 .track-title-link
 {
  display: inline-block;
 }
 
 .play
 {
  display: none;
 }
 
 footer > br
 {
  display: inline-block;
 }
}


/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) 
{
    aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 15px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .gallery
 {
  margin: 15px 0px 15px 0px;
 }
 
 footer > br
 {
  display: inline-block;
 }
}

<!DOCTYPE html>
<html lang="pl">
 <head>
  <meta charset="utf-8"/>
  
  <!-- RWD -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Custom stylesheet-->
  <link href="style.css" rel="stylesheet">
  
  <!-- Include Open Sans Font -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  
  <!-- Include Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 </head>
 
 <body>
  <div class="container">
   
   <aside>
    <div class="profile">
     <img class="img-circle" src="img/p_pic.png">
     <div class="profile-info">
      <div class="name">Jakub Jas</div>
      Kraków, Polska
     </div>
     <div class="social-icons">
      <a href="https://www.facebook.com/manoftheoak" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
      <a href="http://www.last.fm/user/man_of_the_oak" target="_blank"><i class="fa fa-lastfm fa-2x"></i></a>
      <a href="http://soundcloud.com/jakub-jas" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
     </div>
    </div>
    
    <nav>
     <header>Menu</header>
     <div class="nav-content">
      <ul>
       <li><a href="index.html"><i class="fa fa-home"></i>Strona główna</a></li>
       <li><a href="muzyka.html"><i class="fa fa-music"></i>Muzyka</a></li>
       <li><a href="fotografia.html"><i class="fa fa-camera-retro"></i>Fotografia</a></li>
       <li><a href="grafika.html"><i class="fa fa-desktop"></i>Grafika</a></li>
       <li><a href="kontakt.html"><i class="fa fa-envelope"></i>Kontakt</a></li>
      </ul>
     </div>
    </nav>
   </aside>
   
   <section>
    <div class="quote">
     <div class="quote-left">
      <blockquote>
            L'air pur me Manque, le bruit des gens autour m'angoisse<br />
       La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
       Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
         </blockquote> 
     </div>
    
     <div class="quote-right">
      <div class="author-details">
       <div class="track-title">L'échappée</div>
       <div class="track-title-link"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></div>
       <div class="play"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank"><i class="fa fa-play-circle-o fa-3x"></i></a></div>
       <div class="artist-album">
        <span>Les Discrets</span><br />
        Septembre et ses dernières Pensées
       </div>
      </div>
     </div> 
     
     <div class="quote-right-768">
      <div class="author-details">
       <div class="track-title-link"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></div>
       <div class="artist-album">
        <span>Les Discrets</span><br />
        Septembre et ses dernières Pensées
       </div>
      </div>
     </div> 
    </div>
    
    <div class="content">
     <header>Kontakt</header>
     <article>
      <p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój <a href="mailto:manoftheoak@gmail.com">adres e-mail</a>.
      </p>
     </article>
    </div>
   </section>
   
   <div class="clear"></div>
   
   <footer>
    Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
   </footer>
  </div>

 </body>
</html>

Answer 1

只需将 "play" div 移到 "artist-album"

内

body 
{
 font-family: 'Open Sans', sans-serif;
 font-size: 13px;
 color: #7d7d7d;
 background-color: #f0f3f6;
 margin: 0 auto;
 max-width: 1200px;
}

a:link, a:visited
{
 color: #e88d8a;
 text-decoration: none;
}

a:hover, a:active
{
 color: #dd5555;
}

.container 
{
 margin: 0px 15px 30px 15px;
}

aside 
{
 width: 25%;
 float: left;
}

section 
{
 width: 75%;
 float: left;
}

header
{
 color: #ffffff;
 background-color: #dd5555;
 font-size: 1.15em;
 font-weight: bold;
 text-transform: uppercase;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 padding: 15px 15px 15px 20px;
}

h3
{
 color: #dd5555;
}

.profile 
{
 text-align: center;
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 padding: 30px 30px 20px 30px;
 margin: 30px 15px 0px 15px;
}

.img-circle 
{
    border-radius: 50%;
    width: 100%;
    max-width: 200px;
}

.img-rounded
{
 -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.profile-info
{
 margin-bottom: 10px;
}

.name
{
 color: #dd5555;
 font-size: 1.2em;
 font-weight: bold;
 margin: 20px 0px 5px 0px;
}

.social-icons i
{
 display: inline-block;
 padding: 10px;
}

.social-icons a:link, .social-icons a:visited
{
 color: #e88d8a;
 text-decoration: none;
}

.social-icons a:hover, .social-icons a:active
{
 color: #dd5555;
}

nav 
{
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 margin: 30px 15px 0px 15px;
}

.nav-content ul 
{
    list-style-type: none;
    padding: 10px 0px 10px 0px;
    margin: 0;
}

.nav-content i
{
 width: 15px;
 margin-right: 15px;
}

.nav-content a:link, .nav-content a:visited
{
 display: block;
 color: #e88d8a;
 font-size: 1.14em;
 font-weight: 600;
 text-decoration: none;
 padding: 10px 20px 10px 20px;
}

.nav-content a:hover, .nav-content a:active
{
 color: #dd5555;
}

.quote 
{
 display: flex;
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 margin: 30px 15px 30px 15px;
}

blockquote
{
 background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
 background-size: 30px 30px;
 min-height:30px;
 padding: 5px 30px 0 30px;
 margin: 0px;
}

.quote-left 
{
 text-align: center;
 float: left;
 width: 450px;
 padding: 20px 50px 20px 35px;
}

.quote-right 
{
 float: left;
 padding: 20px 25px 10px 0px;
}

.quote-right-768
{
 display: none;
}

.track-title
{
 color: #dd5555;
 font-size: 1.2em;
 font-weight: bold;
}

.track-title-link
{
 display: none;
 color: #dd5555;
 font-size: 1.2em;
 font-weight: bold;
}

.track-title-link a:link, .track-title-link a:visited
{
 color: #e88d8a;
 text-decoration: none;
}

.track-title-link a:hover, .track-title-link a:active
{
 color: #dd5555;
}

.play
{
 float: left;
 margin: 10px 10px 10px 0;
}

.play a:link, .play a:visited
{
 color: #7d7d7d;
 text-decoration: none;
}

.play a:hover, .play a:active
{
 color: #dd5555;
}

.artist-album
{
 float: left;
 padding: 10px 10px 0px 0px;
}

.artist-album span
{
 font-weight: bold;
}

.content 
{
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 clear: both;
 margin: 0px 15px;
}

article 
{
 padding: 2px 20px 4px 20px;
}

.gallery
{
 text-align: center;
 margin: 15px;
}

.links
{
 font-weight: 600;
 margin: 15px 15px 15px 20px;
}

.links ul
{
 list-style-type: none;
    padding: 0;
    margin: 0;
}

.links li
{
 margin-bottom: 5px;
}

.floating-box 
{
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px; 
}

.responsive-container 
{
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.responsive-container iframe 
{
 position: absolute;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
}

.clear
{
 clear: both;
}

footer 
{
 color: #7d7d7d;
 text-align: center;
 background-color: #f9f9f9;
 border-radius: 5px;
 box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
 margin: 30px 15px 0px 15px;
 padding: 15px 0px 15px 0px;
}

footer > br 
{
 display: none;
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) 
{
 aside 
 {
  width: 25%;
 }
 
 section 
 {
  width: 75%;
 }
 
 .quote-right
 {
  padding: 20px 25px 20px 0px;
 }
 
 .track-title
 {
  display: none;
 }
 
 .track-title-link
 {
  display: inline-block;
 }
 
 .play
 {
  display: none;
 }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1080px) 
{
 aside 
 {
  width: 30%;
 }
 
 section 
 {
  width: 70%;
 }
 
 .quote-left
 {
  padding: 20px 20px 20px 15px;
 }
 
 .quote-right
 {
  display: none;
 }
 
 .quote-right-768
 {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) 
{
 aside 
 {
  width: 35%;
 }
 
 section 
 {
  width: 65%;
 }
 
 .quote-left
 {
  padding: 20px 20px 20px 15px;
 }
 
 .quote-right
 {
  display: none;
 }
 
 .quote-right-768
 {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
}

/* Custom, BlackBerry Playbook */ 
@media only screen and (max-width : 600px) 
{
 aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 10px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .track-title
 {
  display: block;
 }
 
 .track-title-link
 {
  display: none;
 }
 
 .play
 {
  display: inline-block;
 }
 
 footer > br
 {
  display: inline-block;
 }
}

/* Custom, iPhone 6 */ 
@media only screen and (max-width : 375px) 
{
    aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 10px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .track-title
 {
  display: block;
 }
 
 .play
 {
  display: inline-block;
 }
 
 footer > br
 {
  display: inline-block;
 }
}

/* Custom, Blackberry Z30 */ 
@media only screen and (max-width : 360px) 
{
    aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 20px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .track-title
 {
  display: none;
 }
 
 .track-title-link
 {
  display: inline-block;
 }
 
 .play
 {
  display: none;
 }
 
 footer > br
 {
  display: inline-block;
 }
}


/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) 
{
    aside 
    {
  width: 100%;
 }
 
 section 
 {
  width: 100%;
 }
 
 .quote 
 {
  flex-direction: column;
  padding-right: 20px;
 }
 
 blockquote
 {
  margin-right: 20px;
 }
 
 .quote-left
 {
  width: 100%;
  padding: 20px;
 }
 
 .quote-right
 {
  display: inline-block;
  padding: 5px 0px 15px 20px;
 }
 
 .quote-right-768
 {
  display: none;
 }
 
 .gallery
 {
  margin: 15px 0px 15px 0px;
 }
 
 footer > br
 {
  display: inline-block;
 }
}

<!DOCTYPE html>
<html lang="pl">
 <head>
  <meta charset="utf-8"/>
  
  <!-- RWD -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Custom stylesheet-->
  <link href="style.css" rel="stylesheet">
  
  <!-- Include Open Sans Font -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  
  <!-- Include Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 </head>
 
 <body>
  <div class="container">
   
   <aside>
    <div class="profile">
     <img class="img-circle" src="img/p_pic.png">
     <div class="profile-info">
      <div class="name">Jakub Jas</div>
      Kraków, Polska
     </div>
     <div class="social-icons">
      <a href="https://www.facebook.com/manoftheoak" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
      <a href="http://www.last.fm/user/man_of_the_oak" target="_blank"><i class="fa fa-lastfm fa-2x"></i></a>
      <a href="http://soundcloud.com/jakub-jas" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
     </div>
    </div>
    
    <nav>
     <header>Menu</header>
     <div class="nav-content">
      <ul>
       <li><a href="index.html"><i class="fa fa-home"></i>Strona główna</a></li>
       <li><a href="muzyka.html"><i class="fa fa-music"></i>Muzyka</a></li>
       <li><a href="fotografia.html"><i class="fa fa-camera-retro"></i>Fotografia</a></li>
       <li><a href="grafika.html"><i class="fa fa-desktop"></i>Grafika</a></li>
       <li><a href="kontakt.html"><i class="fa fa-envelope"></i>Kontakt</a></li>
      </ul>
     </div>
    </nav>
   </aside>
   
   <section>
    <div class="quote">
     <div class="quote-left">
      <blockquote>
            L'air pur me Manque, le bruit des gens autour m'angoisse<br />
       La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
       Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
         </blockquote> 
     </div>
    
     <div class="quote-right">
      <div class="author-details">
       <div class="track-title">L'échappée</div>
       <div class="track-title-link"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></div>           
       <div class="artist-album">
<div class="play"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank"><i class="fa fa-play-circle-o fa-3x"></i></a></div>
        <span>Les Discrets</span><br />
        Septembre et ses dernières Pensées
       </div>
      </div>
     </div> 
     
     <div class="quote-right-768">
      <div class="author-details">
       <div class="track-title-link"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></div>
       <div class="artist-album">
        <span>Les Discrets</span><br />
        Septembre et ses dernières Pensées
       </div>
      </div>
     </div> 
    </div>
    
    <div class="content">
     <header>Kontakt</header>
     <article>
      <p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój <a href="mailto:manoftheoak@gmail.com">adres e-mail</a>.
      </p>
     </article>
    </div>
   </section>
   
   <div class="clear"></div>
   
   <footer>
    Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
   </footer>
  </div>

 </body>
</html>

调整大小时浮动 div

Floating div when resizing

html

css

resize

width

media-queries