Divs没有向下移动答案

【问题标题】：Divs not moving downDivs没有向下移动
【发布时间】：2014-01-09 11:09:10
【问题描述】：

在此页面http://opensourceeducation.in 我想将左侧 div 移动到另一个下方而不是并排。下面的代码用于创建它们。我的大部分尝试都干扰了右侧的 facebook 或 twitter 提要。

while($row=$result->fetch_array(MYSQLI_ASSOC))

{
echo'
<div class="col-sm-6 col-md-4" style="float:left;position:relative;display:inline;">

<div class="thumbnail">

    <div class="caption">

    <h3 class="captionhead">'.$row['TITLE'].'</h3>

    <p class="description">'.$row['Data'].'</p></div>

<div style="margin-bottom:auto;margin-top:15em;position:relative;">

<a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-heart"></span>&nbsp;Like</a>

 <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-heart-empty"></span>&nbsp;Dislike</a>
 &nbsp;<a href="downloader.php?id='.$row['vdo_code'].'" class="btn btn-primary">Download</a>

 &nbsp;<a class="btn btn-success" href="player.php?id='.$row['vdo_code'].'" > PlaY </a></div>

 </div>

 </div>
';

}

更新删除了 float:left 和 display:inline 还是一样。

也尝试使用 col-md-12 col-md-12 但 facebookfeed 向下移动到最后一个 div

【问题讨论】：

wowowowo...请发布浏览器呈现的输出...这样很容易找到错误！ :)
您正在输出内联 css 设置 float:left;和显示：内联；看看这些属性的作用，并尝试删除它们，并设置一个特定的 div 宽度

标签： css

【解决方案1】：

将类从 col-sm-6 col-md-4 更改为 col-sm-12 col-md-12。

【讨论】：

【解决方案2】：

你有很多 float:left; 和 display:inline; 正在进行。删除这些将使每个 div 从前一行下方的新行开始

请参阅DEMO，了解浮点和内联如何与 div 配合使用的示例。

【讨论】：

好的。我刚刚添加了所有的建议，它正在工作。 :D
这是我的最终代码。

【解决方案3】：

在第一个 div 的样式中去掉 float:left; 和 display:inline;，这应该会有所帮助。

您还应该考虑使用单独的样式表，而不是内联样式。

【讨论】：