2 个弹性容器并排显示

Question

在 .maroon 部分内，我有两个 .whitewrap 部分。我想知道为什么它不换行到另一行并并排显示它们。表格应位于文本和图形下方，中间显示一些栗色。 我不想在 .whitewrap 部分之间添加任何内容。请帮忙。

.maroon
 {
 background-color:#663333;
 display:flex;
align-items:center;
justify-content:center;
padding-top:50px;
padding-bottom:50px;

}

  .whitewrap{
background-color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}

 

  .padding
{
padding-top:50px;
padding-bottom:50px;
}


.wh
{
width:80%;

}


.row
{display:flex; 
flex-direction: row;
  align-items:center;
  justify-content:center;
width:100%;
flex-wrap: wrap;

}


.column
{

flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  }
  
    img{
  width:100%;
  display:block;
  height:auto; 
  }
  
    .whitewrap2{
background-color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
  }  
  

<section class="maroon">
<section class="whitewrap wh">

<div class="row">
  <div class="column borderright"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/1f3cbe64-2615-afb7-9979-06694fa51b97.png"><p class="text2">Purchase a combination of 1 suit, 1 tie and 1 shirt to recieve $100 off your total.<br><br>Sign up for this offer below on the right. </p>
</div>
      <div class="column">
  <img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ab2884f4-5505-0c93-941c-bb177eeab689.png">
  
    </div>

</div>


</section>

<section class="whitewrap2 wh padding">

    <form action="https://facebook.us7.list-manage.com/subscribe/post?u=150448d54e332a15d70ff8ba8&amp;id=a626d63797&amp;f_id=0054d2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
        
           
            <label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><br><label for="mce-FNAME">First Name </label><br><input type="text" name="FNAME" class=" text" id="mce-FNAME" value=""><br><label for="mce-LNAME">Last Name </label><br><input type="text" name="LNAME" class=" text" id="mce-LNAME" value="">
       
      <br>  <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">
    
   </form>

   </section>
</section>

Answer 1

这是因为您需要将

display: block;

或

flex-direction: column

添加到 2 个表单的父容器中。

您的代码应该是：

.maroon {
  background-color: #663333;
  display: block;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.whitewrap {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.padding {
  padding-top: 50px;
  padding-bottom: 50px;
}

.wh {
  width: 80%;
}

<section class="maroon">
  <section class="whitewrap wh">

    <div class="row">
      <div class="column borderright"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/1f3cbe64-2615-afb7-9979-06694fa51b97.png">
        <p class="text2">Purchase a combination of 1 suit, 1 tie and 1 shirt to recieve $100 off your total.<br><br>Sign up for this offer below on the right. </p>
      </div>
      <div class="column">
        <img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ab2884f4-5505-0c93-941c-bb177eeab689.png">

      </div>

    </div>


  </section>

  <section class="whitewrap2 wh padding">

    <form action="https://facebook.us7.list-manage.com/subscribe/post?u=150448d54e332a15d70ff8ba8&amp;id=a626d63797&amp;f_id=0054d2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">


      <label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><br><label for="mce-FNAME">First Name </label><br><input type="text" name="FNAME"
        class=" text" id="mce-FNAME" value=""><br><label for="mce-LNAME">Last Name </label><br><input type="text" name="LNAME" class=" text" id="mce-LNAME" value="">

      <br> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">

    </form>

  </section>
</section>

Answer 2

将样式

flex-direction: column;

添加到 .maroon:)