如何在行中显示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" 
    } 
}]

什么是你的关于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 ％。在中等屏幕上。

答

我觉得你的问题我回答在这里：

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

使用float放置“行”彼此相邻。虽然我会建议你改变你的“行”类到更适合的地方，如果可能的话。由于行明确表示它是一行，换句话说就是垂直对齐。

答

您可以使用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>

如何在行中显示div元素

相关推荐