为什么我的栏目被垂直排列而不是2行？

Question

在我的网站上，本来一切都很正常，后来我改了一些不相关的东西，突然我的产品栏目就被全部移到左边去了，而且是单档竖排放置。应该是两行三列，而不是6行一列。看看我的代码，看看能不能帮我找出问题所在。

div {
  height: 250px;
  width: 90%;
  padding: 0 10px;
}

#column1 {
  background-color: lightgrey;
  width: 30%;
}

#column2 {
  background-color: grey;
  width: 30%;
}

#column3 {
  background-color: darkgrey;
  width: 30%;
}

#column4 {
  background-color: darkgrey;
  width: 30%;
}

#column5 {
  background-color: lightgrey;
  width: 30%;
}

#column6 {
  background-color: grey;
  width: 30%;
}

<div id="column1">Single sheet 8.5"/13" printer paper $19.99
  <br/>

  <!--Paypal buttons-->

  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single sheet 8.5" /13 " printer paper">
    <input type="hidden" name="amount" value="19.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>

</div>


<div id="column2">Single sheet 8.5"/13" printer paper(pre-crumpled) $34.99
  <br/>
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single sheet 8.5" /13 " printer paper (pre crumpled)">
    <input type="hidden" name="amount" value="34.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>
</div>


<div id="column3">Single CD-R disc, scratched $42.99
  <br/>
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single CD-R disc, scratched">
    <input type="hidden" name="amount" value="42.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>
</div>


<div id="column4">Single square toilet paper for quarentine days $12.99
  <br/>
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single square toilet paper for quarantine days">
    <input type="hidden" name="amount" value="12.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>
</div>


<div id="column5">Single use toothpick $6.99
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single use toothpick">
    <input type="hidden" name="amount" value="6.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>
</div>


<div id="column6">10cm dental floss $89.99
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="10cm dental floss">
    <input type="hidden" name="amount" value="89.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  </form>
</div>

*注：每个框中原本有图片，但出于安全考虑，我把它们删除了。

Answer 1

你也可以用网格系统。

   body {
    display: grid;
    grid-template-columns: auto auto;
  }
div{

    height:250px; 
    width:90%!important;
    padding:0 10px;
    }
  #column1{ 
  background-color:lightgrey; 
  width:30%; 
  } 
  #column2{ 
  background-color:grey; 
  width:30%; 
  } 
  #column3{ 
  background-color:darkgrey; 
  width:30%; 
  } 
  #column4{ 
  background-color:darkgrey; 
  width:30%; 
  } 
  #column5{ 
  background-color:lightgrey; 
  width:30%; 
  } 
  #column6{ 
  background-color:grey; 
  width:30%; 
  }

Answer 2

有一对夫妇的方式去后，你可以使用浮动，杰森-史蒂芬森建议在评论中，或把你所有的元素在一个DIV，并给它下面的属性，他们将排在行。

在你的css文件中添加以下类。

.parent-div {
   display: flex;
   flex: wrap;
}

添加示例代码：将你所有的div包裹在下面......

    <div class='parent-div'>
  all your code...

     </div>

希望这对你有所帮助，如果你需要进一步的说明，或者因为某些原因，它不适合你，请随时告诉我......。

你的html.css：你的html。

<div id="parent-div">
    <div id="column1">Single sheet 8.5"/13" printer paper $19.99
          <br/>
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single sheet 8.5"/13" printer paper">
    <input type="hidden" name="amount" value="19.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

        </div>
        <div id="column2">Single sheet 8.5"/13" printer paper(pre-crumpled) $34.99
          <br/>
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single sheet 8.5"/13" printer paper (pre crumpled)">
    <input type="hidden" name="amount" value="34.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

        </div>
        <div id="column3">Single CD-R disc, scratched $42.99
          <br/>
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single CD-R disc, scratched">
    <input type="hidden" name="amount" value="42.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

        </div>

        <div id="column4">Single square toilet paper for quarentine days $12.99
          <br/>
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single square toilet paper for quarantine days">
    <input type="hidden" name="amount" value="12.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

        </div>
        <div id="column5">Single use toothpick $6.99
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="Single use toothpick">
    <input type="hidden" name="amount" value="6.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

        </div>
        <div id="column6">10cm dental floss $89.99
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="[email protected]">
    <input type="hidden" name="lc" value="US">
    <input type="hidden" name="item_name" value="10cm dental floss">
    <input type="hidden" name="amount" value="89.99">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="button_subtype" value="services">
    <input type="hidden" name="no_note" value="0">
    <input type="hidden" name="tax_rate" value="10.000">
    <input type="hidden" name="shipping" value="2.99">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

       </div>

        </div>

你的html： 你的css：

 #parent-div{
          display: flex;
          flex: wrap;
        height:150px; 
          width:100%;
          padding:0 10px;
          }

#column1{ 
          background-color:lightgrey; 
          width:30%; 
          } 
          #column2{ 
          background-color:grey; 
          width:30%; 
          } 
          #column3{ 
          background-color:darkgrey; 
          width:30%; 
          } 
          #column4{ 
          background-color:darkgrey; 
          width:30%; 
          } 
          #column5{ 
          background-color:lightgrey; 
          width:30%; 
          } 
          #column6{ 
          background-color:grey; 
          width:30%; 
          }