css - 网格排水沟对于视口来说太宽并导致换行

Question

这是一个非常令人费解的例子，但是假设我有 100 个 div 并且它们有一个margin-right……1px它们将中断到下一行，因为仅元素的宽度就占据了视口的整个宽度。

现在，我明白了，但是当问题是由固定宽度的排水沟引起时呢？

我想我的问题是，是否有可能在不将网格分解到下一行的情况下让排水沟自己（和他们的列）塌陷？

这是我要修复的示例：http ://codepen.io/corysimmons/pen/PZOPMm?editors=110

Answer 1

这是一个使用display:flex布局的示例（运行“整页”来调整大小）：

#container {
  display: flex;
  justify-content: space-between;
}
#container > div {
  padding: 0 10px;
  background: tomato;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

Answer 2

当容器没有足够的空间容纳浮动的孩子时，他们将进入下一行，即预期行为。

您可以将容器设置为white-space:nowrap，并将子项设置为display:inline-block如果您需要它们始终排成一行。

根据规范8.3.1 Collapsing margins：

水平边距永远不会塌陷。

.container {
  white-space: nowrap;
}
div {
  display: inline-block;
  margin-right: 60px;
  background: tomato;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

但是，您可能会感兴趣一些解决方法。基本思想是制作一个均匀分布的网格系统。

1. 弹性盒方法：

.container {
  display: flex;
  justify-content: space-around;
}
div {
  background: tomato;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

2. CSS 表格布局：

.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}
div {
  display: table-cell;
  text-align: center;
  background: tomato;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

Answer 3

这是另一个可能有用的选项 - 使用媒体查询来指定不同设备宽度的装订线宽度。

div {
  float: left;
  width: 4.16%;
  background: HotPink;
}
@media (min-width: 800px) {
  div {
    width: 3.16%;
    margin-right: 1%;
  }
}
@media (min-width: 1000px) {
  div {
    width: 2.16%;
    margin-right: 2%;
  }
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>