0
私はの写真のボックスモデルのスタイルに従いましたのビデオですが、フロート要素を適用して私のサイトを更新すると空白が表示されます。CSS Floatが適用されますが、テキストは表示されません。
ここに私のCSSとHTMLのスニペットがあります。
CSS
* {
margin: 0px;
padding: 0px;
}
h2 {
font: bold 23px "Times New Roman";
color: black;
}
h3 {
font: italic 16px "Times New Roman";
}
header, section, footer, aside, nav, article, hgroup {
display: block;
}
body {
text-align: center;
}
#page_wrapper {
width: 1000px;
margin: 20px auto;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
font-family: "Times New Roman";
font-size: 23px;
padding: 10px;
font-decoration: italic;
color: white;
background: #454545;
}
#top_menu {
background: #454545;
color: white;
padding: 3px;
border: 1px solid black;
font: italic 20px Georgia;
}
#top_menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: italic 14px "Times New Roman";
color: white;
}
#new_div {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#page_section {
float: left;
width: 660px;
margin: 30px;
border: 1px solid black;
font: 15px "Times New Roman";
}
#page_aside {
float: left;
width: 220px;
margin: 20px 0px;
padding: 30px;
border: 1px solid black;
background: #DCE1E3;
text-align: center;
font: 15px "Times New Roman";
}
HTMLウィルは、この規則に任意の要素を意味clearfix: both; CSSルール、フロートを持っているだろう "クリア" 以前の要素に参照のうえれる
<head>
<meta charset="utf-8" />
<title>A Website</title>
<link href="styles1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page_wrapper">
<header id="top_header">
<h1>A Website</h1>
</header>
<nav id="top_menu">
<ul style="list-style-type:none">
<li><a href="http://www.google.com">Home</a></li>
<li><a href="http://www.google.com">About</a></li>
<li><a href="http://www.google.com">Portfolio</a></li>
<li><a href="http://www.google.com">Contact</a></li>
</ul>
</nav>
<div id="new_div">
<section id="page_section">
<article>
<header>
<hgroup>
<h2>I am an H2 Article Title</h2>
<h3>I am an H3 Article Subtitle</h3>
</hgroup>
</header><br><br>
<p>Hi I'm a paragraph. La La La !</p> <br><br>
</p>
</article>
</section>
<aside id="page_aside">
<h4>Updates for the Website</h4><hr><br>
<p>- I'm an Update</p><br>
<p>- So Am I!</p>
</aside></div><br>
</div>
</body>
</html>
...それは動作しますが、コードのこの部分を試してみてください。しかし、基本的には、浮動小数点を使用するときにコンテンツが崩壊するのを防ぐために、clearfixクラスを適用する必要があります。残念ながら、これはあなたのコードには問題ありません。私はあなたのコードを読んで、何が起こっていたのかを理解するのに苦労しました。ちょうどw3schoolsをチェックアウトし、物事をゆっくりと行ってください！がんばろう。 –
@WillDiFruscio私を助けてくれてありがとう！私は、あなたがclearfixクラスを使うと言ったときの意味を理解していません。私は何を修正するか分からない。 –
グーグル '浮動小数点にクリアフィックスを追加する'、あなたはそこに行くよ。 –