网格间距对于视口而言太宽并导致换行

Question

这是一个非常复杂的例子，但是假设我有 100 个 div，它们有一个 margin-right 的 1px...由于单独的元素占据了视口的整个宽度。

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

我想我的问题是，是否可以在不将网格分解到下一行的情况下让排水沟自行折叠（及其列）？

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

Answer 1

这里是一个使用 display:flex 布局的例子（运行 'full page' 调整大小）：

#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

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

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>

Answer 3

当容器没有足够的空间 space 来容纳浮动的子元素时，它们会进入下一行，这是预期的行为。

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

根据规范8.3.1 Collapsing margins:

Horizontal margins never collapse.

.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>

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

flexbox 方法：

.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>

CSS table布局：

.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>

网格间距对于视口而言太宽并导致换行

Grid gutters are too wide for viewport and causing line break

css

grid

gutter