如何水平放置尽可能多的 <div>

Question

我有一个容器div，其中包含许多其他divs。我希望将这些divs 布局到一种网格视图中，其中每行中尽可能多的divs 具有相同的宽度。 divs 有定义的 min-width 属性，但没有 max-width 属性。

我找到了Fitting as many divs as possible horizontally in HTML, and filling the line width，但它与我想要的不同，因为我想要的不是固定的列数，而是固定的最小宽度。

我正在尝试做一种响应式设计——我想我会为此使用 flex box，但我真的找不到任何指南来完成我想要的。所以基本上我想根据弹性项目的最小宽度和屏幕宽度制作一个具有灵活列数的弹性框。

任何帮助表示赞赏：3

Answer 1

嗯，首先你可以在一个 div 中添加无限数量的 div。现在，如果你想让一组 div 等于父元素的 100% 宽度，你需要除以 100% / ( #of divs 在父级内），并将该宽度分配给每个子级（父级内的整个 div）。为了让它正常工作，你需要给父母和孩子一个“box-sizing:border-box”。另外，如果您希望它们“水平对齐”，您必须选择：

1. 为每个子 div 赋予 Float:left 属性；
2. 为每个子 div 赋予属性 Display: Inline-block:

现在，在我看来，这不是尝试构建响应式网站的方式。除了“如何水平放置尽可能多的 div”之外，还有其他一些技巧。我认为您看到了使用列的教程，但是有一个经验法则是有原因的，那就是不要连续使用超过 12 列。但同样，在尝试进行响应式设计时还有更好的方法。

Answer 2

这与没有 flex 的 Sreekanth 相同。

span 和 div 选择器可以更改为类选择器以获得更通用的解决方案。

.container>div {
  float: left;
  width: 50px;
  height: 50px;
  background: #e6e6e6;
  text-align: center;
  border: 1px dotted #ababab;
}
.container>span {
    display: block;
    clear: both;
}

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

  <span></span>
</div>
after

Answer 3

你可以试试这个：

  <div class="flex-container">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

  .flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
  display: flex;
}
.flex-container > div {
  background: pink;
  color: white;
  font-size: 25px;
  margin: 0 2px;
}

Answer 4

对于外部 div，给它 CSS 样式：

display:flex;
flex-direction:row;

然后对于内部 div，给它们 CSS 样式：

min-width: (whatever you want);

我在下面给出了一个例子。但是，您当然最好为外部 div 设置一个类，为内部 div 设置一个类，以保持清洁和关注点分离。

<div style="display:flex;flex-direction:row;">
<div style="min-width:8em;">
hello
</div>
<div style="min-width:8em;">
goodbye
</div>
<div style="min-width:8em;">
one
</div>
<div style="min-width:8em;">
two
</div>
<div style="min-width:8em;">
three
</div>
<div style="min-width:8em;">
four
</div>
<div style="min-width:8em;">
five
</div>
<div style="min-width:8em;">
six
</div>
<div style="min-width:8em;">
seven
</div>
<div style="min-width:8em;">
and so on
</div>
</div>

Answer 5

这是你可以用弹性盒子做的事情。

.container {
  display: flex;
  flex-flow: row wrap;
}

.container>div {
  width: 50px;
  height: 50px;
  background: #e6e6e6;
  text-align: center;
  border: 1px dotted #ababab;
}

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