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：

水平边距永不崩溃。

＆＃13;

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

＆＃13;

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

＆＃13;

但是，您可能会对此感兴趣。基本思想是建立一个平等分布的网格系统。

flexbox方法：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS表格布局：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

网格水槽对于视口来说太宽，导致断线

3 个答案: