元素未按预期布局

debugcn 发表于 Dev

Caxinaswin

我试图建立一个使用flickr api的简单网站，获取照片和详细信息，并使用引导程序显示内容，但是正在发生奇怪的事情，我不知道如何解决它，此刻我的代码正在这样工作：

在此图片中，第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：对不起，我的绘画技巧很差，英语也很糟糕:)

罗巴

在第三个程序段之后，添加一个程序段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>");

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。