在响应式设计中，浮动 div 不会向左对齐答案

【问题标题】：Floating div won't align to the left in a responsive design在响应式设计中，浮动 div 不会向左对齐
【发布时间】：2014-10-21 23:31:36
【问题描述】：

我有 ASP:REPEATER（动态列表），左侧有浮动 div，如下所示：

+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | +---------------------+
|                     | |                     | +---------------------+
+---------------------+ +---------------------+ |                     |
                                                |                     |
                                                |                     |
                                                |                     |
                                                +---------------------+
+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
+---------------------+ +---------------------+ +---------------------+

但无论第三个 div 的高度如何，第 4 个 div 都应该出现在另一行。问题是我有一个响应式设计，所以我不能给它一个特定的高度。它应该是这样的：

+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | +---------------------+
|                     | |                     | 
+---------------------+ +---------------------+ 
+---------------------+ +---------------------+ +---------------------+
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
|                     | |                     | |                     |
+---------------------+ +---------------------+ +---------------------+
+---------------------+
|                     |
|                     |
|                     |
|                     |
+---------------------+

这是每个 div 的类：

.wrapProducts
{
float: left; width: 30%;
margin: 0% 3% 5% 0%;
}

我该如何解决？

非常感谢！

【问题讨论】：

您需要使用float还是可以将它们声明为inline&inline-block？
使用 Bootstrap 和 Bootstrap 行/列放置
使用 clear:left; (CSS) 每三个元素之后（伪选择器）

标签： html css responsive-design css-float

【解决方案1】：

在这种情况下你不能使用float，这是float 的正常行为。 Read this CSS-Tricks article for more infos.。您可以每隔三个元素clear，但您的布局将不再响应。

您只有两种响应式解决方案来实现您的列表布局：

您可以使用带有table、tr 和td 的表格布局，也可以使用inline-block divs 代替浮动div。

【讨论】：

【解决方案2】：

尝试在最终 div 的样式上使用 clear:both。

如果您删除最终的 div，您是否会以其他方式实现您的设计？

【讨论】：

请阅读：How to Answer。 StackOverflow 是一个问答，而不是论坛。所以你不应该在你的回答中问另一个问题；）如果你需要任何细节，请在 cmets 中询问他们；）