html - 调整大小时 float div

标签 html css resize width media-queries

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

我有一个使用媒体查询创建的网站。在这个元素中，除了纯 HTML 和 CSS 之外，我不能使用任何其他东西，这就是为什么为了保持设计干净，我隐藏了一些特定宽度的 div(我指的是右上角的“播放”按钮，例如)。

重现问题:

  1. 调整窗口大小，使“播放”按钮消失。
  2. 回到初始宽度。

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

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

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>

最佳答案

只需将“播放”div 移到“艺术家专辑”中

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>

关于html - 调整大小时 float div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33673096/

上一篇：html - 如何将水平滚动条添加到具有垂直滚动条的父 div 的内部 div？

下一篇：javascript - AngularJS:通过评估它们的属性值来显示/隐藏多个 div

相关文章：

css关键帧动画不会停在最后一帧

javascript - 动画滚动到顶部 2

java - 如何在 Tomcat 服务器中使用 HTML 访问/WEB-INF 中的文件？

html - 带有固定 <ul> 的 IE6 不工作

javascript - 通过 jQuery Validate 插件使用 HTML 5 验证消息

html - 在 IE6 上显示 png 时出现问题

jquery - 移动灯箱？

winforms - 如何根据分辨率调整控件大小？

html - 根据宽度设置为 auto 的其他 div 的 clientwidth 调整目标 div 的大小

javascript - 如何强制溢出:hidden for layered images within a div?

©2024 IT工具网  联系我们