为什么我的div自身定位怪异？

Question

在我的计算机上，我的网站显示为

在我的手机上

我该如何在手机上做到这一点，使它们每行只能打一次，而不会挤在一起

#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  text-align: center;
  width: 30%;
  padding: 10px;
  margin-right: 30px;
  background: #FFF;
  -webkit-box-shadow: 0 1px 5px #ccc;
  -moz-box-shadow: 0 1px 5px #ccc;
  -ms-box-shadow: 0 1px 5px #ccc;
  -o-box-shadow: 0 1px 5px #ccc;
  box-shadow: 0 1px 5px #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.container {
  width: 95%;
  margin: auto;
  overflow: hidden
}

<section id="boxes">
  <div class="container">
    <div class="box">
      <!--<img src="./img/img.png>"-->
      <h3>GROWING COMMUNITY</h3>
      <redline></redline>
      <p>Info about the community</p>
    </div>
    <div class="box">
      <img src="86118e7a6a88f4cfd90d2c95aae8137a.png">
      <h3>CUSTOM SCRIPTS</h3>
      <redline></redline>
      <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
    </div>
    <div class="box">
      <img src="download_1_380x152.jpg">
      <h3>REALISTIC ROLEPLAY</h3>
      <redline></redline>
      <p>Info about the community</p>
    </div>
  </div>
</section>

根据我的经验，HTML会自动为我执行此操作，我做错了什么吗？

Answer 1

鉴于使用浮点数实现此布局的方式，可以使用media query使框在特定浏览器视口宽度处具有width: 33%。

在此示例中，我选择了640px作为断点）。

如果您以移动优先的方式考虑解决方案，则默认情况下，框应显示为100％宽度的块。仅当浏览器检测到视口的宽度超过640像素时，媒体查询才会应用（并且框可以以33％的宽度浮动）。

顺便说一句，不要对框本身应用任何边距或填充，否则它们将占用超过33％的空间，并且您不会获得整齐的3列布局。而是将样式应用于框的子级。

.box-inner {
  text-align: center;
  padding: 10px;
  margin: 0 10px 10px;
  background: #FFF;
  box-shadow: 0 1px 5px #ccc;
  border-radius: 3px;
}

@media (min-width: 640px) {
  .box {
    float: left;
    width: 33%;
  }
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <h3>GROWING COMMUNITY</h3>
      <p>Info about the community</p>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <h3>CUSTOM SCRIPTS</h3>
      <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <h3>REALISTIC ROLEPLAY</h3>
      <p>Info about the community</p>
    </div>
  </div>
</div>

当然，您现在可能希望探索更现代的CSS实现这种布局的方法。

CSS flexbox

@media (min-width: 640px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .box {
    flex: 1 1 33%;
  }
}

<div class="container">
  <div class="box">
    <h3>GROWING COMMUNITY</h3>
    <p>Info about the community</p>
  </div>
  <div class="box">
    <h3>CUSTOM SCRIPTS</h3>
    <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
  </div>
  <div class="box">
    <h3>REALISTIC ROLEPLAY</h3>
    <p>Info about the community</p>
  </div>
</div>

CSS grid

@media (min-width: 640px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="container">
  <div class="box">
    <h3>GROWING COMMUNITY</h3>
    <p>Info about the community</p>
  </div>
  <div class="box">
    <h3>CUSTOM SCRIPTS</h3>
    <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
  </div>
  <div class="box">
    <h3>REALISTIC ROLEPLAY</h3>
    <p>Info about the community</p>
  </div>
</div>

但是，每种方法都遵循相同的策略。 从宽度为100％的方块开始。然后在某个断点处，应用媒体查询，以允许框以更适当的方式填充容器中的空间。

Answer 2

您可以使用flexbox。使用order和flex-flow属性，我们也可以实现。只需根据需要调整CSS。

@media screen and (max-width: 560px) {
    .container { display: flex; flex-flow: column;
   }

}

Answer 3

如果按照您的逻辑，我会将框的宽度更改为：

width: calc(100%/3 - 50px);

但是使用媒体查询的解决方案会更优雅。