如何逐行显示div元素

Question

I have a html code which displays ads ,but the ads are display like a coloumn vise, but I want them to display in a horizontal row .How can we display the horizontal rows.And ads are which are coming dynamically based on the user selection.How can we display these ads in a row wise fashion .

Html code is :

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

Code snippet from JS:

<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/>

And JS is :

$("#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/>');

            }
        }
    });
});

And Json Data is:

[{
    "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"
    }
}]

Answer 1

If you can modify the html of ad, try replacing col-md-3 by col-sm12 so the whole thing would read:

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

   </div>
 </div>

I'm assuming you're using bootstrap, so having col-md-3 makes it float left with width 33%. On medium screen.