Question

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

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并显示：inline 还是一样。

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

Answer 1

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

Answer 2

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

下面

有关float和inline如何使用div的示例，请参阅此DEMO。

Answer 3

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

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

Div没有向下移动

3 个答案: