Question

这是我的HTML和CSS练习，我不明白为什么我在该部分的边框包含所有内容。我想有两个独立的包装部分：＆＃34;介绍＆＃34;和＆＃34;主要＆＃34;。

＆＃13;

@font-face {
  font-family: myFont src: url(BebasNeue-webfont.woff);
}
body {
  font-family: myFont;
  width: 90%;
  margin: auto;
}
h1,
h2 {
  display: inline;
  color: #016008;
}
h1 {
  font-size: 60px;
}
h2 {
  font-size: 40px;
}
li {
  display: inline;
}
li a {
  text-align: center;
  text-decoration: none;
}
img {
  position: relative top: 0px;
  right: 20px;
  float: left;
  margin: 5px;
  border: 1px solid grey;
}
.intro {
  float: right;
}
.primarynav {
  list-style-type: none;
  color: #016008;
  text-align: right;
}
.secondnav {
  display: block;
  text-align: inherit;
}
.main {
  padding: 10px;
  border: 1px solid grey;
}
.intro {
  border: 1px solid grey;
  margin: 15px;
}
.news1 {
  width: 60%;
  background-color: #dddddd;
  margin: 15px;
}
section {} footer {
  background-color: #dddddd;
}
fieldset {
  background-color: white;
}
mark {
  color: black;
  background: none;
  font-weight: bold;
}
.latestnews {
  background-color: #dddddd;
  position: relative;
  left: 790px;
  bottom: 365px;
  width: 33%;
  padding: 5px;
}
.suscribe {
  background-color: #dddddd;
  position: relative;
  left: 790px;
  bottom: 350px;
  width: 33%;
  padding: 5px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Welcome to BootsWorld</title>
  <link rel="stylesheet" type="text/css" href="boots.css" />
</head>

<body>
  <header>
    <nav>
      <div class="logo">
        <h1>BOOT</h1>
        <h2>WORLD</h2> 
      </div>
      <ul class="primarynav">
        <li><a href="#">Site map</a>
        </li>
        <li><a href="#">Privacy policy</a>
        </li>
        <li><a href="#">Accessibility</a>
        </li>
      </ul>
      <ul class="secondarynav">
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">SHOP</a>
        </li>
        <li><a href="#">NEWS</a>
        </li>
        <li><a href="#">ABOUT US</a>
        </li>
        <li><a href="#">CONTACT US</a>
        </li>
        <li><a href="#">SUBSCRIBE</a>
        </li>
      </ul>
    </nav>
  </header>

  <article class="intro">
    <header>
      <img src="boots.png" alt="boots image" />
      <h2>Welcome to boot world</h2>
    </header>
    <p>BootWorld is the largest online footwear retailer in the UK.<a href="#">Our shop</a> always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why <a href="mailto:#">not send us a message.</a>
    </p>
  </article>

  <section class="main">
    <article class="news">
      <header>
        <h2>NEW IN THE SHOP</h2>
      </header>
      <div class="news1">
        <h3>CLASSIC COWBOY BOOTS</h3>
        <p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only
          <mark class="black">£49.99</mark>
        </p>
        <h3>MILITARY BOOTS</h3>
        <p>Hard-wearing Men's military boots, guaranteed to withstand all weathers. From only
          <mark class="black">£69.99</mark>
        </p>
        <h3>ROMAN SANDALS</h3>
        <p>Get ready for summer with some stylish roman sandals. From only
          <mark class="black">£39.99</mark>
        </p>
        <h3>OFFICE SHOES</h3>
        <p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only
          <mark class="black">£44.99</mark>
        </p>
      </div>
    </article>
    <aside class="latestnews">

      <h3>Latest News</h3>
      <p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
      <footer>Posted by: Joe</footer>
    </aside>
    <aside class="suscribe">
      <h3>Subscribe</h3>
      <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
      <form>
        <fieldset>
          <legend>SIGN UP NOW!</legend>
          <p>
            <label for="yourname">Your name</label>
            <br/>
            <input type="text" name="yourname" id="yourname" size="20" />
          </p>
          <p>
            <label for="emailaddress">email address</label>
            <br/>
            <input type="text" name="emailaddress" id="emailaddress" size="20" />
          </p>
          <button onclick="myFunction()">Sign Up</button>
        </fieldset>
      </form>
    </aside>
  </section>

  <footer class="pagefooter">
    <h3>OUR ADDRESS:</h3>
    <p>Malet Street,
      <br/>London, WC1E 7HX</p>
  </footer>
</body>

</html>

＆＃13;

Answer 1

因为您浮动图像和介绍并且从不清除它们。在Paint p = chart.getPaint(Chart.PAINT_INFO); p.setTextSize(17); CSS规则中添加一个明确的内容：

.main

<强> jsFiddle example

Answer 2

我注意到你在第40行<section class="main">打开你的主要课程，但是你永远不会关闭它。当我关闭它时，我可以在不同的类周围放置一个边框。我也能够使用你的CSS：

.main {
  padding: 10px;
  border: 2px solid grey;
}

转换为news1并能够无问题地换行。如果你能进一步解释我可以尝试进一步帮助。

为什么我的边框包含所有内容？

2 个答案: