未按预期布局的元素

Question

我试图构建一个使用flickr api的简单网站，获取fotos和详细信息，并使用bootstrap显示内容，但是发生了一些奇怪的事情，我不知道如何修复它，我的代码目前是< strong>像这样工作：

在这张图片中，第4张照片div应该包含在下一行中，而不是填充从第3行留下的空间，

这是我想要的效果：

代码html：

<div class="row" id="results">

</div>

容器就在那里，但我有更多的东西，所以没有用它把它放在这里，重要的div就在那里。

代码javascript相关部分

var htmlText = "<div class='col-md-4 style='margin-top:200px'><img src =" + src + " width=" + width + " height=" + height + ">" +
"<p><b>título:  </b>:" + title + "</p>" + "<p><b>autor:  </b>" + owner + "</p>" + "<p><b>data:  </b>" + date + "</p>" + "<p><b>local:  </b>" + local

for (var i = 0; i < tags.length; i++) {
    htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>";
}

htmlText += "</div>";
$('#results').append(htmlText);

Ps：对不起我糟糕的油漆技巧和糟糕的英语：）

Answer 1

在您的css文件中的某个位置，您需要将每个列的显示属性设置为＆＃39; inline-block＆＃39;获得你正在寻找的效果。将垂直对齐设置为＆＃39; top＆＃39;同样，一切都应该像你想要的那样。检查bootstrap docs的display属性，你会发现所描述的inline-block。

Answer 2

您可以在HTML中使用table th td，然后在CSS中使用位置 希望有所帮助

Answer 3

请原谅我，因为我不确定在每3列之后使用新行是否有任何问题，但是我会提到它，因为到目前为止还没有人做过。

您可以在每3个列块之后添加“div class ='row'”。这应该可以解决问题。

Answer 4

每隔3个块后，添加一个class="col-xs-12"的块以强制其他人进入新行。如果您希望为不同的视口设置不同数量的列，您甚至可以通过将类visible-md添加到中宽屏幕上的3列来抑制此行为。

最后您的代码将成为：

var htmlText = "<div class='col-md-4 style='margin-top:200px'><img src =" + src + " width=" + width + " height=" + height + ">" +
"<p><b>título:  </b>:" + title + "</p>" + "<p><b>autor:  </b>" + owner + "</p>" + "<p><b>data:  </b>" + date + "</p>" + "<p><b>local:  </b>" + local

for (var i = 0; i < tags.length; i++) {
    htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>";
}

htmlText += "</div>";
$('#results').append(htmlText);

if (isThirdBlock) // Determine this somehow
    $('#results').append("<div class='col-xs-12'></div>");