Почему мои столбцы выровнены по вертикали, а не в 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="example@gmail.com">
    <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="example@gmail.com">
    <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="example@gmail.com">
    <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="example@gmail.com">
    <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="example@gmail.com">
    <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="example@gmail.com">
    <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

есть несколько способов go, вы можете использовать float, как предложил Джейсон Стивенсон в комментариях, или поместить все свои элементы в один div и указать ему свойства ниже и они выстроятся в ряды.

добавьте класс ниже в свой css файл:

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

добавив пример кода: оберните все ваши div внутри ниже ...

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

     </div>

надеюсь, это поможет, дайте мне знать, если вам нужны дополнительные разъяснения, или если по какой-то причине это не сработает для вас ...

ваш 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="dannapye@gmail.com">
    <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="dannapye@gmail.com">
    <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="dannapye@gmail.com">
    <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="dannapye@gmail.com">
    <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="dannapye@gmail.com">
    <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="dannapye@gmail.com">
    <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>

ваш 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%; 
          }