Question

我试图在水平线上均匀分配div。我将在屏幕的最大宽度上有3个div。当我调整浏览器大小并且它不适合3时，它将切换为两个，然后一个。我已经找到了一些如何做到这一点的例子，但没有一个按照我要找的方式做到。例如我想要的是：

全屏宽度：

[------------------------------------------]
[   [--------]   [--------]   [--------]   ]
[   [        ]   [        ]   [        ]   ]
[   [        ]   [        ]   [        ]   ]
[   [--------]   [--------]   [--------]   ]
[                                          ]
[   [--------]   [--------]   [--------]   ]
[   [        ]   [        ]   [        ]   ]
[   [        ]   [        ]   [        ]   ]
[   [--------]   [--------]   [--------]   ]
[------------------------------------------]

调整宽度：

[-----------------------------]
[   [--------]   [--------]   ]
[   [        ]   [        ]   ]
[   [        ]   [        ]   ]
[   [--------]   [--------]   ]
[                             ]
[   [--------]   [--------]   ]
[   [        ]   [        ]   ]
[   [        ]   [        ]   ]
[   [--------]   [--------]   ]
[                             ]
[   [--------]   [--------]   ]
[   [        ]   [        ]   ]
[   [        ]   [        ]   ]
[   [--------]   [--------]   ]
[-----------------------------]

请注意，div每次都以页面为中心。

我能找到的是这些示例强制div与div的边界左右，然后空间事先分布，如下例所示：

[-----------------------------]
[[--------]         [--------]]
[[        ]         [        ]]
[[        ]         [        ]]
[[--------]         [--------]]
[                             ]
[[--------]         [--------]]
[[        ]         [        ]]
[[        ]         [        ]]
[[--------]         [--------]]
[                             ]
[[--------]         [--------]]
[[        ]         [        ]]
[[        ]         [        ]]
[[--------]         [--------]]
[-----------------------------]

以下是我尝试过的代码示例：

http://jsfiddle.net/k9FqG/ ---这个只能起作用 text-align，但这并不适用于div，只是文本。我需要文字保持对齐左。当我调整大小时，这也不会丢弃div 浏览器。
http://radiatingstar.com/distribute-divs-images-equaly-line
http://jsfiddle.net/BYEw5/ ---这个只能起作用 text-align，但这并不适用于div，只是文本。我需要文字保持对齐左。当我调整大小时，这也不会丢弃div 浏览器。

Answer 1

希望这是你想要做的事情!!!

<强> CSS

#container {
 width:100%;
 text-align:center;
}
#container > div {
 width: calc(100% / 6);  
 display: inline-block;
 vertical-align: top;   
 border:1px solid red;
 text-align:center;
 margin:2%;    
 padding:20px;
}

<强> HTML

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

在http://jsfiddle.net/bvgn46hu/1

中查看此操作

Answer 2

现在所有现代浏览器都支持灵活内容（纯css）。如果您事先不知道元素的数量：

#container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

见这里 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在水平线上均匀分配div

2 个答案: