Question

＆＃13;

 <html>
    <style>
    #wrapper{
    	width: 960px;
    	margin: 0;
    	border:dashed yellow;
    	background-color: orange;
    }
    
    header{
    	float: left;
    	width: 960px;
    	border: dotted blue;
    }
    
    nav{
    	float: left;
    	width: 960px;
    	border: thin double pink;
    }
    
    article{
    	float: left;
    	width: 730px;
    	margin-left: 115px;
    	margin-right: 115px;
    	border: groove black;
    	background-color: white;
    }
    
    #sec1{
    	float: left;
    	width: 270px;
    	height: 500px;
    	margin-left: 45px;
    	margin-right: 45px;
    	margin-top: 50px;
    	background-color: turquoise;
    	border-radius: 10px;
    	
    }
    
    #h1sec1{
    	float: left;
    	width: 100%;
    	text-align: center;
    }
    
    #psec1{
    	float: left;
    	width: 100%;
    }
    
    #sec2{
    	float: left;
    	width: 270px;
    	height: 500px;
    	margin-left: 45px;
    	margin-right: 45px;
    	margin-top: 50px;
    	background-color: turquoise; 
    	border-radius: 10px;
    }
    
    #h1sec2{
    	float: left;
    	width: 100%;
    	text-align: center;
    }
    
    #psec2{
    	float: left;
    	width: 100%;
    }
    </style>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
        <div id="wrapper">
            <header></header>
            <nav></nav>
            <article>
                <section id="sec1">
                	<h1 id="h1sec1">Section 1</h1>
                    <p id="psec1"></p>
                </section>
                
                <section id="sec2">
                	<h1 id="h1sec2">Section 2</h1>
                    <p id="psec2"></p>
                </section>
                
                 <section id="sec1">
                	<h1 id="h1sec1">Section 1</h1>
                    <p id="psec1"></p>
                </section>
                
                <section id="sec2">
                	<h1 id="h1sec2">Section 2</h1>
                    <p id="psec2"></p>
                </section>
            </article>
         </div>
    </body>
    </html>

＆＃13;

包装器不会包围商品标签和内容。我不确定这只是一个简单的数学错误，或者我是否需要调整边距并将其浮动。无论哪种方式，请在这里帮助我。

Answer 1

代码中完成的更改：

从样式中删除了所有float:left。因为它将子元素从其父元素中删除
为所有部分提供display:inline-block，以便如果宽度可用，它们可以排成一行，作为内联元素。
删除了 ID sec1，h1sec1，psec1，sec2，h1sec2＆amp; psec2并添加了类 sec，h1sec＆amp; psec因为他们有共同的风格，我们应该始终为每个元素使用唯一ID 。

＆＃13;

#wrapper {
  width: 960px;
  margin: 0;
  border: dashed yellow;
  background-color: orange;
}
header {
  width: 960px;
  border: dotted blue;
}
nav {
  width: 960px;
  border: thin double pink;
}
article {
  width: 730px;
  margin-left: 115px;
  margin-right: 115px;
  border: groove black;
  background-color: white;
}
.sec {
  display: inline-block;
  width: 270px;
  height: 500px;
  margin-left: 45px;
  margin-right: 45px;
  margin-top: 50px;
  background-color: turquoise;
  border-radius: 10px;
}
.h1sec {
  width: 100%;
  text-align: center;
}
.psec {
  width: 100%;
}

＆＃13;

<html>
<style>
</style>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
</head>

<body>
  <div id="wrapper">
    <header></header>
    <nav></nav>
    <article>
      <section class="sec">
        <h1 class="h1sec">Section 1</h1>
        <p class="psec"></p>
      </section>

      <section class="sec">
        <h1 class="h1sec">Section 2</h1>
        <p class="psec"></p>
      </section>

      <section class="sec">
        <h1 class="h1sec">Section 1</h1>
        <p class="psec"></p>
      </section>

      <section class="sec">
        <h1 class="h1sec">Section 2</h1>
        <p class="psec"></p>
      </section>
    </article>
  </div>
</body>

</html>

＆＃13;

Answer 2

你只需要一种“清除花车”的方法......一种所谓的“ClearFix”

讨论了许多方法here。

#wrapper {
  width: 960px;
  margin: 0;
  border: dashed yellow;
  background-color: orange;
  overflow:auto;
}

    #wrapper {
      width: 960px;
      margin: 0;
      border: dashed yellow;
      background-color: orange;
      overflow:auto;
    }
    header {
      float: left;
      width: 960px;
      border: dotted blue;

    }
    nav {
      float: left;
      width: 960px;
      border: thin double pink;
    }
    article {
      float: left;
      width: 730px;
      margin-left: 115px;
      margin-right: 115px;
      border: groove black;
      background-color: white;
    }
    #sec1 {
      float: left;
      width: 270px;
      height: 500px;
      margin-left: 45px;
      margin-right: 45px;
      margin-top: 50px;
      background-color: turquoise;
      border-radius: 10px;
    }
    #h1sec1 {
      float: left;
      width: 100%;
      text-align: center;
    }
    #psec1 {
      float: left;
      width: 100%;
    }
    #sec2 {
      float: left;
      width: 270px;
      height: 500px;
      margin-left: 45px;
      margin-right: 45px;
      margin-top: 50px;
      background-color: turquoise;
      border-radius: 10px;
    }
    #h1sec2 {
      float: left;
      width: 100%;
      text-align: center;
    }
    #psec2 {
      float: left;
      width: 100%;
    }

<div id="wrapper">
  <header></header>
  <nav></nav>
  <article>
    <section id="sec1">
      <h1 id="h1sec1">Section 1</h1>
      <p id="psec1"></p>
    </section>

    <section id="sec2">
      <h1 id="h1sec2">Section 2</h1>
      <p id="psec2"></p>
    </section>

    <section id="sec1">
      <h1 id="h1sec1">Section 1</h1>
      <p id="psec1"></p>
    </section>

    <section id="sec2">
      <h1 id="h1sec2">Section 2</h1>
      <p id="psec2"></p>
    </section>
  </article>
</div>

＆＃34;包装＆＃34;不能使用html5代码

2 个答案: