Question

我有一个包含许多其他div的容器div。我希望将这些div布局为一种网格视图，其中尽可能多的div s在每行中具有相等的宽度。 div具有已定义的最小宽度属性，但不具有最大宽度属性。

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

我正在努力做出一种响应式设计 - 我想我会使用弹性盒，但是找不到任何指导来完成我想要的东西。所以基本上我想根据弹性项目的最小宽度和屏幕宽度制作一个具有灵活列数的弹性框。

感谢任何帮助：3

Answer 1

对于外部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 2

您可以使用弹性框进行操作。

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

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

这与没有弯曲的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 5

好吧，首先你可以在div中添加无限量的div。现在，如果你想让一组div都等于父级的100％宽度，你需要除以100％/（ #of父母内部的div，并将宽度赋给每个子节点（父节点内的整个div）。为了使其正常工作，您需要为父级和子级提供“box-sizing：border-box”。另外，如果你想让它们“水平对齐”，你必须选择：

给每个孩子div属性Float：left;
为每个子div提供属性Display：Inline-block：

现在，在我看来，在尝试构建响应式网站时，这不是一条路。还有一些其他技巧，而不是“如何尽可能多地适应div”。我认为你看到一个教程是使用了列，但是有一个经验法则，原因是连续使用不超过12列。但同样，在尝试制作响应式设计时还有更好的方法。

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

5 个答案: