我不知道如何使该框水平显示

Question

我尝试过几次使该带有img，h1，p标签的盒子水平显示。我已经将宽度设置为30％以使其具有响应性，但是它没有用

这是我的代码：

/* BOXES */

#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  width: 30%;
  text-align: center;
  padding: 10px;
}

#boxes .box img {
  width: 90px;
}

<section>
  <div id="boxes">
    <div class="container">
      <div class="box">
        <img src="./img/logo_html.png" alt="Html5">
        <h3>HTML5 Markup</h3>
        <p> blah blah </p>
        <img src="./img/logo_css.png" alt="Css3">
        <h3>Styling CSS</h3>
        <p>blah blah </p>
        <img src="./img/logo_brush.png" alt="Graphic Design">
        <h3>Graphic Design</h3>
        <p>blah blah </p>
      </div>
    </div>
  </div>
</section>

Answer 1

您只有一个box div-您需要将每组元素包装在自己的box中。另外，我将使用flex-box：

，而不是使用float（css不再需要使用float，因为它实际上不是为滥用它而制造的）。

/* BOXES */

#boxes {
  margin-top: 20px;
}

#boxes .container {
  display:flex;                   /* make the container flex */
  flex-direction:row;             /* align the children in a row */
  justify-content:space-between;  /* space them out equally */
}

#boxes .box {                     /* remove the float from this */
  width: 30%;
  text-align: center;
  padding: 10px;
}

#boxes .box img {
  width: 90px;
}

<section>
  <div id="boxes">
    <div class="container">
      <div class="box">
        <img src="./img/logo_html.png" alt="Html5">
        <h3>HTML5 Markup</h3>
        <p> blah blah </p>
      </div>
      <div class="box">
        <img src="./img/logo_css.png" alt="Css3">
        <h3>Styling CSS</h3>
        <p>blah blah </p>
      </div>
      <div class="box">
        <img src="./img/logo_brush.png" alt="Graphic Design">
        <h3>Graphic Design</h3>
        <p>blah blah </p>
      </div>
    </div>
  </div>
</section>

More information about flexbox (css tricks)

MDN Basic concepts of Flexbox