元素不按預期佈局

即時通訊設法建立一個簡單的網站消費flickr api，獲取照片和細節，並顯示與bootstrap內容，但奇怪的事情正在發生，我不知道如何解決它，我的此刻的代碼是如下工作：元素不按預期佈局

此圖像中

，第四屆照片格應包下一行，而不是填補從3TH留下的空間，

這裏是我想要的效果：

代碼的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：你需要對不起，我的壞油漆技能，英語不好:)

來源

2016-11-15 caxinaswin

每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>");

來源

2016-11-15 14:02:10 Robba

某處在你的CSS文件中有每一個的顯示特性你的列設置爲'inline-block'來獲得你要找的效果。將垂直對齊設置爲「頂部」，所有內容都應該看起來像您想要的。檢查顯示屬性的引導文檔，你會發現描述的內嵌塊。

來源

2016-11-15 12:29:04

仍然沒有工作：/ – caxinaswin

嘗試使用清除CSS屬性來調整浮動的問題。希望它可以幫助:-) –

你可以在你的HTML中使用tablethtd，然後使用CSS 希望幫助位置

來源

2016-11-15 12:43:45 Yoshirou

請你原諒我，我不知道你是否有使用每3列後新行的任何問題但是我會提到它，因爲迄今爲止沒有其他人做過。

你可以每3分塊後添加一個「DIV CLASS =‘行’」。這應該解決這個問題。

來源

2016-11-15 13:55:48 Gabba

hmmmm，在默認情況下引導可以使用相同的行和增加大小 – caxinaswin

元素不按預期佈局

回答

相關問題