如何在行中顯示div元素

我有一個顯示廣告的html代碼，但廣告顯示爲一個coloumn老虎鉗，但我希望它們以水平行顯示。如何顯示水平行。廣告是根據用戶選擇動態發佈的。如何以行方式顯示這些廣告。如何在行中顯示div元素

HTML代碼：從JS

<div class="row"> 
    <div class="col-md-3" id="adsid"></div> 
</div>

代碼片段：

<input type="checkbox" id=' + s[i]['id']['0'] + ' /> 
<a href="#" class="list-group-item "> 
    <input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/> 
    <h4 class="list-group-item-heading"> 
     <font color="blue">' + s[i]['hea']["0"] + '</font> 
    </h4> 
    <p class="list-group-item-text">' + s[i]['desc']["0"] + '</p> 
    <p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p> 
    <p class="list-group-item-text"> 
     <font color="green">' + s[i]['url']["0"] + '</font> 
    </p> 
</a><br/>

和JS是：

$("#groupid").change(function() { 
    $("#adsid").html(""); 

    var grpvalue = $("#groupid").val(); 
    var accid = $('#accountid').val(); 
    var adsarray = []; 
    $.ajax({ 
     type: "post", 
     dataType: 'json', 
     url: "pages/ads.php", 
     data: "adgroup=" + grpvalue + "&accid=" + accid, 
     success: function (s) { 
      for (var i = 0; i < s.length; i++) { 

       var head = s[i]['hea']["0"]; 
       //alert(head); 
       var adid = s[i]['id']["0"]; 
       var desc1 = s[i]['desc']["0"]; 
       var desc2 = s[i]['desc2']["0"]; 
       var url = s[i]['url']["0"]; 
       var p = document.createElement('p'); 
       var txt = document.createTextNode(head); 
       p.appendChild(txt); 
       //$('adsid').append(p); 
       adsarray.push(head, adid, desc1, desc2, url); 

       $("#adsid").append(""); 
       $("#adsid").append('<input type="checkbox" id=' + s[i]['id']['0'] + ' /><a href="#" class="list-group-item "><input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/><h4 class="list-group-item-heading"><font color="blue">' + s[i]['hea']["0"] + '</font></h4><p class="list-group-item-text">' + s[i]['desc']["0"] + '</p><p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p><p class="list-group-item-text"><font color="green">' + s[i]['url']["0"] + '</font></p></a><br/>'); 

      } 
     } 
    }); 
});

和JSON數據是：

[{ 
    "hea": { 
     "0": "Kidney Stone Removal" 
    }, 
    "id": { 
     "0": "40602813172" 
    }, 
    "desc": { 
     "0": "Get treated at top kidney center" 
    }, 
    "desc2": { 
     "0": "Take a free advice from our experts" 
    }, 
    "url": { 
     "0": "www.ainuindia.com" 
    } 
}]

來源

2015-02-06 Kiran Kumar

什麼是你的關於div的CSS？ – Grushton94 2015-02-06 11:23:43

抱歉，我還沒有爲此創建任何css類，但我期望用戶可以在css中提供解決方案。這就是爲什麼我已經添加了css標籤的原因。 – 2015-02-06 11:27:27

使用'float'或'display：inline-block' – Justinas 2015-02-06 11:30:12

如果你可以修改廣告的HTML，嘗試通過col-sm12更換col-md-3所以，整個事情就閱讀：

<div class="row"> 
    <div class="col-sm-12" id="adsid"> 

    </div> 
</div>

我假設你正在使用的引導，所以有col-md-3使得它左浮動寬度爲33 ％。在中等屏幕上。

來源

2015-02-06 11:30:42

我覺得你的問題我回答在這裏：

http://www.w3schools.com/css/css_float.asp

使用float放置「行」彼此相鄰。雖然我會建議你改變你的「行」類到更適合的地方，如果可能的話。由於行明確表示它是一行，換句話說就是垂直對齊。

來源

2015-02-06 11:31:48 tedeji

您可以使用UL L1標籤爲波紋管給的風格里的列表樣式：無

<div class="row"> 
     <ul > 
      <li class="col-md-3 col-sm-3 col-xs-6"><a href="#"><img src="" /><span class="badge">Lorem ipsum</span></a></li> 
      <li class="col-md-3 col-sm-3 col-xs-6"><a href="#"><img src="" /><span class="badge">Lorem ipsum</span></a></li> 
      <li class="col-md-3 col-sm-3 col-xs-6"><a href="#"><img src="" /><span class="badge">Lorem ipsum</span></a></li> 
      <li class="col-md-3 col-sm-3 col-xs-6"><a href="#"><img src="" /><span class="badge">Lorem ipsum</span></a></li> 

     </ul> 
    </div>

來源

2015-02-06 11:57:32 Nadeem

如何在行中顯示div元素

回答

相關問題