html - 部分始终以 100% 宽度离开屏幕

Question

我在处理网页上的部分时遇到了一些问题。我的第一部分向左浮动，下面的部分我遇到了麻烦。我已经尝试清除第二部分，这导致它的位置位于上面的部分之后。如果我然后使用 float，则部分放置会起作用，但它的宽度会被丢弃。

清除后的部分图像: float 时的截面图像:

/* Section who */

section {
  background-color: white;
}

#who {
  padding: 30px 30px 30px 45px;
  float: left;
  clear: both;
}

#who h1 {
  text-align: center;
}

#who .sub_section {
}

#who #summary {
  float: left;
  width: 60%;
}

#who #skills {
  float: right;
  text-align: center;
  width: 40%;
}

#who #skills .skill span {
  content: '';
  display: inline-block;
  height: 11px;
  width: 11px; 
  margin-right: 8px;
  margin-top: 0;
  border-radius: 50%;
}

#who #skills .skill p {
  margin: 0;
  font-weight: bold;
}

#who #skills .skill .active-skill {
  background-color: #3C7ABE;
}

#who #skills .skill .empty-skill {
  background-color: lightgrey;
}
/* End of section who */

/* Section Work */

#work {
  background-color: #3C7ABE;
  margin-top: 50px;
  padding: 30px;
  clear: all;
  display: block;
  float: right;
  width: 100%;
}

#work h1 {
  text-align: center;
  clear: all;
}


/* End of section work */

  <section id="who">
    <div class="sub_section" id="summary">
      <div class="content">
      </div>
    </div>
    <div class="sub_section" id="skills">
      <div class="content">
      </div>
    </div>
  </section>

  <section id="work">
    <div class="work_item">
      <img src="http://placehold.it/350x150">
    </div>
  </section>

我试图通过删除 HTML 中的内容并仅提供 div 排列来尽量减少向您展示的代码量。这两个部分及其内容的所有 CSS 都在上面。如果需要任何其他信息，请告诉我，但我认为这应该足够了。

谢谢

Answer 1

你到底想达到什么目的？如果您同时添加“float: left”，则它不会错位在左侧。您应该为没有元素的 #work div box-sizing: border-box 提供 100% 宽度 + 填充。

/* Section who */

section {
  background-color: white;
}

#who {
  padding: 30px 30px 30px 45px;
  float: left;
  clear: both;
}

#who h1 {
  text-align: center;
}

#who .sub_section {
}

#who #summary {
  float: left;
  width: 60%;
}

#who #skills {
  float: right;
  text-align: center;
  width: 40%;
}

#who #skills .skill span {
  content: '';
  display: inline-block;
  height: 11px;
  width: 11px; 
  margin-right: 8px;
  margin-top: 0;
  border-radius: 50%;
}

#who #skills .skill p {
  margin: 0;
  font-weight: bold;
}

#who #skills .skill .active-skill {
  background-color: #3C7ABE;
}

#who #skills .skill .empty-skill {
  background-color: lightgrey;
}
/* End of section who */

/* Section Work */

#work {
  background-color: #3C7ABE;
  margin-top: 50px;
  padding: 30px;
  display: block;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

#work h1 {
  text-align: center;
  clear: both;
}


/* End of section work */

 <section id="who">
    <div class="sub_section" id="summary">
      <div class="content">
      </div>
    </div>
    <div class="sub_section" id="skills">
      <div class="content">
      </div>
    </div>
  </section>

  <section id="work">
    <div class="work_item">
      <img src="http://placehold.it/350x150">
    </div>
  </section>

请参阅此 fiddle :https://jsfiddle.net/czoyLet5/

也许对你有帮助