- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经尝试找到解决问题的方法,但无济于事。
我有一个使用媒体查询创建的网站。在这个元素中,除了纯 HTML 和 CSS 之外,我不能使用任何其他东西,这就是为什么为了保持设计干净,我隐藏了一些特定宽度的 div(我指的是右上角的“播放”按钮,例如)。
重现问题:
不幸的是,这个问题是随机发生的,有时一切都很完美,有时却每次都发生。我已经能够使用在 OS X Yosemite 10.11.1 上运行的 Safari 9.0.1 和 Google Chrome 46.0.2490.86 重现它。
请在下面找到解释问题的图片:
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/
我知道问题的标题听起来很奇怪,但我不知道该怎么调用它。 首先,我有一个网格布局,我希望我的 .search-wrapper 宽度为 50% 并向右浮动。在我的演示中 jsfiddle整个 .searc
我们正在使用 QA-C 来实现 MISRA C++ 一致性,但是该工具会为这样的代码喷出错误: float a = foo(); float b = bar(); float c = a - b; 据
考虑 float a[] = { 0.1, 0.2, 0.3}; 我很困惑a稍后传递给函数 foo(float* A) .不应该是 float* 类型的变量指向单个浮点数,对吗?就像这里提到的tu
这可能是我一段时间以来收到的最好的错误消息,我很好奇出了什么问题。 原代码 float currElbowAngle = LeftArm ? Elbow.transform.localRotation
刚开始学习 F#,我正在尝试为 e 生成和评估泰勒级数的前 10 项。我最初编写了这段代码来计算它: let fact n = function | 0 -> 1 | _ -> [1
我已经使用 Erlang 读取二进制文件中的 4 个字节(小端)。 在尝试将二进制转换为浮点时,我一直遇到以下错误: ** exception error: bad argument in
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
我每次都想在浏览器顶部修复这个框。但是右边有一些问题我不知道如何解决所以我寻求帮助。 #StickyBar #RightSideOfStickyBar { float : right ; }
我正在研究 C# 编译器并试图理解数学运算规则。 我发现在两种不同的原始类型之间使用 == 运算符时会出现难以理解的行为。 int a = 1; float b = 1.0f; Cons
假设我有: float a = 3 // (gdb) p/f a = 3 float b = 299792458 // (gdb) p/f b = 29979244
Denormals众所周知,与正常情况相比,表现严重不佳,大约是 100 倍。这经常导致 unexpected软件 problems . 我很好奇,从 CPU 架构的角度来看,为什么非规范化必须是 那
我有一个由两个 float 组成的区间,并且需要生成 20 个随机数,看起来介于两个 float 定义的区间之间。 比方说: float a = 12.49953f float b = 39.1123
我正在构建如下矩阵: QMatrix4x3 floatPos4x3 = QMatrix4x3( floatPos0.at(0), floatPos1.at(0), floatPos2.at(0),
给定归一化的浮点数f,在f之前/之后的下一个归一化浮点数是多少。 通过微动,提取尾数和指数,我得到了: next_normalized(double&){ if mantissa is n
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素? 为了帮助可视化我的问题,我创建了以下 jsFiddle http://
关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素? 为了帮助可视化我的问题,我创建了以下 jsFiddle http://
我有一个新闻源/聊天框。每个条目包含两个跨度:#user 和#message。我希望#user 向左浮动,而#message 向左浮动。如果#message 导致行超过容器宽度,#message 应该
我想创建一个“记分卡”网格来输出一些数据。如果每个 div.item 中的数据都具有相同的高度,那么在每个 div.item 上留下一个简单的 float 会提供一个漂亮的均匀布局,它可以根据浏览器大
我正在学习使用 CSS float 属性。我想了解此属性的特定效果。 考虑以下简单的 HTML 元素: div1 div2 This is a paragraph 以及以下 CSS 规则: div {
我正在尝试从可以是 int 或 float 的文件中提取数据。我发现这个正则表达式将从文件 (\d+(\.\d+)?) 中提取这两种类型,但我遇到的问题是它将 float 拆分为两个。 >>> imp
我是一名优秀的程序员,十分优秀!