html - 让 div 换行

Question

我试图让“div”在 @media query max-width 321px 上的另一行继续，但在桌面上保持相同的设计，我试图 float : left 并将 .aboutBox 设置为 width: 100% 但仍然没有成功。

这是我想为移动设备实现的目标:imgur.com/byoafCc 然而，这是在桌面 css 上发生的事情:imgur.com/tSwOJI4

HTML

    <div id="aboutContainer">
    <div class="aboutBox">
      <h2>WHAT IS SHARPTURN NETWORK</h2>
      <p>Sharpturn Network is a multi marketing platform that specialises in advertisement and promotion.</p>
      <h2>HOW DID IT START</h2>
      <p>Ryan Williams and Dan Lewandowski began building the business plan, brand design and website layout in 2014 and it was given a huge reconstruction in early 2016 with a more mature
      approach.</p>
    </div>
        <div class="aboutBox">
      <h2>WHAT IS SHARPTURN NETWORK</h2>
      <p>Sharpturn Network is a multi marketing platform that specialises in advertisement and promotion.</p>
      <h2>HOW DID IT START</h2>
      <p>Ryan Williams and Dan Lewandowski began building the business plan, brand design and website layout in 2014 and it was given a huge reconstruction in early 2016 with a more mature
      approach.</p>
    </div>
  </div>

桌面 CSS:

#aboutContainer {
    display: flex;
    width: 100%;
    height: 400px;
    margin: auto;
    background-color: #505050;
    border-top: 1px solid #000;
  }

  .aboutBox {
    float: left;
    width: 50%;
    height: 600px;
  }

  .aboutBox h2 {
    letter-spacing: 1.2px;
    font-size: 26px;
    color: #fff;
    margin-left: 50px;
    padding-top: 25px;
    padding-bottom: 10px;
  }

  .aboutBox p {
    color: #fff;
    padding-left: 100px;
    padding-right: 100px;
    font-size: 22px;
    line-height: 1.2em;
    font-weight: 200;
  }

移动 CSS:

#aboutContainer {
    float: left;
    width: 100%;
    height: 800px;
    background-color: #505050;
    border-top: 1px solid #000;
  }

  .aboutBox {
    width: 100%;
    height: 800px;
  }

  .aboutBox h2 {
    font-family: 'Questrial',sans-serif;
    padding-left: 10px;
    font-size: 17px;
    color: #fff;
  }

  .aboutBox p {
    color: #fff;
    padding-left: 20px;
    padding-right: 15px;
    font-size: 15px;
    font-weight: 200;
  }

Answer 1

你可以试试这个:

在这个演示中是移动添加 display:inline-block; 在这个 id 文件 #aboutContainer

#aboutContainer {
    display: flex;
    width: 100%;
    height: auto;
    margin: auto;
    background-color: #505050;
    border-top: 1px solid #000;
    display:inline-block;
  }

  .aboutBox {
    float: left;
    width: 100%;
    height: auto;

  }

  .aboutBox h2 {
    letter-spacing: 1.2px;
    font-size: 26px;
    color: #fff;
    margin-left: 50px;
    padding-top: 25px;
    padding-bottom: 10px;

  }

  .aboutBox p {
    color: #fff;
    padding-left: 100px;
    padding-right: 100px;
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 200;
    text-align:justify;
  }

DEMO HERE

和

桌面演示

#aboutContainer {
    display: flex;
    width: 100%;
    height: auto;
    margin: auto;
    background-color: #505050;
    border-top: 1px solid #000;
  }

  .aboutBox {
    float: left;
    width: 50%;
    height: auto;
  }

  .aboutBox h2 {
    letter-spacing: 1.2px;
    font-size: 18px;
    color: #fff;
    margin-left: 50px;
    padding-top: 25px;
    padding-bottom: 10px;
  }

  .aboutBox p {
    color: #fff;
    padding-left: 100px;
    padding-right: 10px;
    font-size: 14px;
    line-height: 1.2em;
    font-weight: 200;
  }

DEMO HERE

抱歉我的英语不好