Question

当我使用CSS浮动属性时，它的工作部分完美正如我们在HTML中看到的那样，ID #contact float在右侧是完美的，但ID #workExperiance应该在正常顺序下的全名之下如何做到它也是浮动的。需要详细解释

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

<html lang="en">

<head>
  <title>Full Name Resume</title>
  <meta charset=utf-8>
</head>

<body>
  <div>
    <section>
      <h1 id="name"><span class="main">full </span> Name</h1>
    </section>
    <section>
      <ul id="contact">
        <li><span class="main">Cell:</span> +1-000000000</li>
        <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
        <li><span class="main">Location:</span> NY,USA.</li>
      </ul>
    </section>
  </div>
  <section id="workExperiance">Work Experience</section>
</body>

</html>

Answer 1

添加function test() { var arr = ["OTHER-REQUEST-ASFA","OTHER-REQUEST-ASFB","OTHER-REQUEST-ASFC"] var a = arr.indexOf("ASFB") alert(a) }它会起作用

div{float:left; width:100%;}

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em; 
  width: 75%;
  margin: 0 auto;
}
div{float:left; width:100%;}
.main{color: #4EC5C1;}
#name{float:left;}
#contact{float:right;list-style-type:none;}

Answer 2

使用clear: both详细了解 Clear

clear CSS属性指定元素是否可以在旁边在它之前的浮动元素或必须向下移动（清除）在他们之下。 clear属性适用于浮动和非浮动元素。

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  width: 75%;
  margin: 0 auto;
}

section#workExperiance {
  clear: both;
}

.main {
  color: #4EC5C1;
}

#name {
  float: left;
}

#contact {
  float: right;
  list-style-type: none;
}

<div>
  <section>
    <h1 id="name"><span class="main">full </span> Name</h1>
  </section>
  <section>
    <ul id="contact">
      <li><span class="main">Cell:</span> +1-000000000</li>
      <li><span class="main">Email: </span> aaaaaa@gmail.com</li>
      <li><span class="main">Location:</span> NY,USA.</li>
    </ul>
  </section>
</div>
<section id="workExperiance">Work Experience</section>

P.S：在这种情况下最好使用div，而不需要使用section。通常section用于父wrapper。

Answer 3

body {
  font-family: Arial, sans-serif;
  font-size: 1.1em; 
  width: 75%;
  margin: 0 auto;
}
.main{color: #4EC5C1;}
#name{float:left; display:block;}
#contact{float:right;list-style-type:none; width:50%; padding:0; display:block}
#workExperiance{
float:left;
display:block;
}
#left{
width:40%;
float:left;
}

<html lang="en">
  <head>
    <title>Full Name  Resume</title>
    <meta charset=utf-8>
   </head> 
  <body>
    <div>
    <div id="left">
    <section><h1 id = "name"><span class = "main">full </span> Name</h1></section> <section id="workExperiance">Work Experience</section></div><section>
    <ul id="contact"><li><span class = "main">Cell:</span>  +1-000000000</li>
      <li><span class = "main">Email: </span>  aaaaaa@gmail.com</li>
      <li><span class = "main">Location:</span> NY,USA.</li></ul></section>
      </div>
      
    </body>
    
  </html>

浮动时始终使用display:block和特殊宽度

使用浮动有错误？

3 个答案: