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

和

DESKSTOP DEMO

#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
抱歉，我的英语很差

让div进入新的界限

1 个答案: