Question

我有一个显示广告的HTML代码，但广告显示为coloumn vise，但我希望它们显示在水平行中。我们如何显示水平行。广告是基于动态来的用户选择。我们如何以行方式显示这些广告。

Html代码是：

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

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

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 Data是：

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

如果您可以修改广告的HTML，请尝试将col-md-3替换为col-sm12，以便全部内容为：

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

   </div>
 </div>

我假设你正在使用bootstrap，所以让col-md-3使它向左浮动，宽度为33％。在中等屏幕上。

Answer 2

我想你的问题我在这里回答：

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

使用float来放置＆＃34;行＆＃34;彼此相邻。虽然我建议你改变你的＆＃34;行＆＃34;如果可能的话，选择更合适的东西。由于行明确表示它是一行，换句话说是垂直对齐。

Answer 3

你可以使用ul li tag作为下面的样式给li作为list-style：none

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

如何逐行显示div元素

3 个答案: