尺码内容 - HTML/CSS

Question

我刚刚开始学习响应式网页设计，所以我仍然是一个菜鸟。我做了一个包含 5 个部分的基本站点，每个部分都有不同的颜色和文本。问题是，当我将 google window 变小时，深蓝色部分的宽度没有调整到 window 的大小，它的一些内容留在右边google window 的一侧，它创建了一个水平滚动条。知道如何解决这个问题吗？

/* general */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 25px;
  background: #f7f6d3;
}


/* layout */

.wrap {
  width: 1024px;
  margin: 0 auto;
}

section {
  color: #fff;
  font: 16px/22px Rockwell, "Courier Bold", Courier, Georgia, serif;
  background: #9F3FA3;
  border-radius: 9px;
  margin-bottom: 25px;
  padding: 20px;
  float: left;
  width: 19.53%;
  margin-right: 6px;
  min-height: 300px;
}

section:nth-child(1) {
  background: #3b9ae1;
}

section:nth-child(2) {
  background: #f6be00;
}

section:nth-child(3) {
  background: #e64134;
}

section:nth-child(4) {
  background: #eb70b1;
}

section:nth-child(5) {
  background: #0f1a5f;
  margin-right: 0;
}


/* clearfix */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

@media screen and (max-width: 820px) {
  section {
    width: 49.5%;
    margin-bottom: 1%;
    min-height: 200px;
  }
  section:nth-child(1),
  section:nth-child(2) {
    margin-right: 0;
  }
  section:nth-child(3) {
    width: 100%;
  }
}

@media screen and (max-width: 560px) {
  section {
    margin-right: 0;
    width: 100%;
    float: none;
    min-height: 0;
  }
}

<div class="wrap group">
  <section>
    Finn is a silly kid who wants to become a great hero one day. He might not look too tough, but if there's evil around, he'll slay it. That's his deal.
  </section>
  <section>
    Finn's best friend is a wise, old dog with a big heart. Jake has the magical ability to stretch and grow. When evil's not running amok, he plays viola with his girlfriend, Lady Rainicorn.
  </section>
  <section>
    Armed with a magic crown and an icy heart, the Ice King has only one goal: to secure a wife by any means necessary.
  </section>
  <section>
    As a millionaire nerd enthusiast, Princess Bubblegum immerses herself in every branch of geekdom from rocket science to turtle farming.
  </section>
  <section>
    Marceline is a wild rocker girl. Centuries of wandering the Land of Ooo have made her a fearless daredevil.
  </section>
</div>

Answer 1

这是因为您明确设置了 .wrap 的宽度。因此，如果 space 不够，div 将始终采用相同的宽度并生成滚动条。下面的代码片段可以正常工作（更改了 .wrap 选择器）。

/* general */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 25px;
  background: #f7f6d3;
}


/* layout */

.wrap {
  max-width: 1024px;
  margin: 0 auto;
  width:100%;
}

section {
  color: #fff;
  font: 16px/22px Rockwell, "Courier Bold", Courier, Georgia, serif;
  background: #9F3FA3;
  border-radius: 9px;
  margin-bottom: 25px;
  padding: 20px;
  float: left;
  width: 19.53%;
  margin-right: 6px;
  min-height: 300px;
}

section:nth-child(1) {
  background: #3b9ae1;
}

section:nth-child(2) {
  background: #f6be00;
}

section:nth-child(3) {
  background: #e64134;
}

section:nth-child(4) {
  background: #eb70b1;
}

section:nth-child(5) {
  background: #0f1a5f;
  margin-right: 0;
}


/* clearfix */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

@media screen and (max-width: 820px) {
  section {
    width: 49.5%;
    margin-bottom: 1%;
    min-height: 200px;
  }
  section:nth-child(1),
  section:nth-child(2) {
    margin-right: 0;
  }
  section:nth-child(3) {
    width: 100%;
  }
}

@media screen and (max-width: 560px) {
  section {
    margin-right: 0;
    width: 100%;
    float: none;
    min-height: 0;
  }
}

<div class="wrap group">
  <section>
    Finn is a silly kid who wants to become a great hero one day. He might not look too tough, but if there's evil around, he'll slay it. That's his deal.
  </section>
  <section>
    Finn's best friend is a wise, old dog with a big heart. Jake has the magical ability to stretch and grow. When evil's not running amok, he plays viola with his girlfriend, Lady Rainicorn.
  </section>
  <section>
    Armed with a magic crown and an icy heart, the Ice King has only one goal: to secure a wife by any means necessary.
  </section>
  <section>
    As a millionaire nerd enthusiast, Princess Bubblegum immerses herself in every branch of geekdom from rocket science to turtle farming.
  </section>
  <section>
    Marceline is a wild rocker girl. Centuries of wandering the Land of Ooo have made her a fearless daredevil.
  </section>
</div>

尺码内容 - HTML/CSS

Sizing content - HTML/CSS

html

css

responsive