调整大小时浮动div

时间：2015-11-12 13:55:52

标签： html css resize width media-queries

我试过找到解决问题的办法，但无济于事。

我有一个使用媒体查询创建的网站。在这个项目中，除了纯HTML和CSS之外我不能使用其他任何东西，这就是为什么为了保持设计清洁，我在某些宽度上隐藏了一些div（我指的是＆＃; 39;例如，在右上角播放＆＃39;按钮。

重现问题：

  1. 调整窗口大小，以便播放＆＃39;按钮消失。
  2. 回到初始宽度。

    3. 不幸的是，问题是随机发生的，有时候一切都很完美，有时候每次都会发生。我已经能够使用在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

    提前感谢您的帮助！

    代码：

    ＆＃13;
    ＆＃13; 
    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;
	}
}
    ＆＃13; 
    <!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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

1 个答案:

答案 0 :(得分：0)

只需移动你的游戏＆＃34; div inside＆＃34; artist-album＆＃34;

＆＃13;
＆＃13; 
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;
	}
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题