截面始终在屏幕上，宽度为100％

Question

我在网页上遇到一些问题。我的第一部分是左侧浮动，下面的部分我遇到了麻烦。我已经尝试清除第二部分，导致它放置在上面的部分后面。如果我然后使用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

您想要达到什么目标？如果你同时添加＆＃34; float：left＆＃34;它没有错过左侧。你应该给#work div box-sizing：border-box你没有100％宽度的元素+填充。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请参阅此小提琴：https://jsfiddle.net/czoyLet5/

也许它会帮助你

Answer 2

我认为您需要为两个部分设置box-sizing: border-box;

section {
  background-color: white;
}

#who {
  padding: 30px 30px 30px 45px;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

#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%;
  box-sizing: border-box;
}

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

<section id="who">
    <div class="sub_section" id="summary">
      <div class="content">section1
      </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>