Question

我正在尝试按照 thenewboston 的视频中显示的网站设计的框模式样式，但是当我应用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

 <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>

Answer 1

Will将引用clearfix: both; CSS规则，这意味着具有此规则的任何元素都将“清除”任何以前具有浮动的元素。

尝试在主要块之间添加以下div元素，您应该开始获得不同的结果。您当然可以将clearfix规则应用于主要元素块本身，但这是一个非常基本的示例。

.clearfix {
  float: left;
  clear: both;
  width: 100%;
}

然后在主要块之间使用元素，甚至作为容器中的最后一个子元素：

<div class="clearfix"></div>

有关clearfix引用this question的更详细答案。

Answer 2

试试这段代码，它会起作用..

* {
   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>
<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>

CSS Float应用但文本根本不显示？

2 个答案: