为什么我的列垂直对齐而不是 2 行？答案

【问题标题】：Why are my columns being aligned vertically instead of in 2 rows?为什么我的列垂直对齐而不是 2 行？
【发布时间】：2020-05-09 15:46:34
【问题描述】：

在我的网站上，一切正常，然后我更改了一些不相关的内容，突然我的产品列一直向左移动，并将单个文件放在垂直线上。它应该是两排三排，而不是六排一排。查看我的代码，看看你能不能帮我找出问题所在。

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>

*注意：最初每个盒子里都有图片，但出于安全原因，我删除了它们。

【问题讨论】：

标签： html css multiple-columns

【解决方案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%; 
  }

【讨论】：

嗯，这似乎不起作用。您介意在您的答案中发布代码 sn-p 吗？
我已经编辑了上面的代码。用这个替换你的风格
好的，那么您将需要提供整个样式表，以便我们可以检查到底发生了什么。因为上面的 css 在我这边工作
我确实发布了我的完整 CSS 文档

【解决方案2】：

有几种方法可以解决这个问题，您可以按照 Jason Stephenson 在 cmets 中建议的那样使用 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%; 
          }

【讨论】：

你能在你的答案中发布一个代码 sn-p 吗？
假设你想让它们包裹起来，它们看起来像上面的屏幕截图，如果不是，你希望它们排成一行，从你的 CSS 类中删除“flex:wrap”行，然后它们'将在一行中
那么我应该用那个替换当前的 div 吗？
你在我的屏幕截图中看到我将 flex 属性分配给身体。我只是为了简单起见。你应该像我一样创建一个 div，然后将所有的 html 代码粘贴到其中。然后将 css 类添加到您的 css 样式表中。
这不起作用，你能发个sn-p吗？