时间戳

首页 > 解决方案 > 设计使用 jQuery 创建的 HTML 元素

html - 设计使用 jQuery 创建的 HTML 元素

问题描述

我正在使用来自服务器端的调用创建HTML元素。Ajax现在的问题是，网页的设计是响应式的。不知何故，我无法按预期将动态生成的元素与页面对齐。用下面Ajax的调用说，元素被创建：

var html = "";
$.ajax({
  type: "POST",
  url: "MethodName",
  data: id,
  cache: false,
  success: function(data){
     $.each(data, function() {
         $.each(this, function(k, v) {
             html += '<div class="wrapper"><div class="content">Dynamic data here</div></div>';
         });
     });

     $(".divs").append(html);
   }
});

在前端，我有这样的东西：

<style>
    .content {
        float: right;
     }
</style>

<h4 class="content">Data here</h4>

<div class="container">
   <div class="divs">
   </div>
</div>

如您所见，标题h4与页面右上方对齐，在 div 部分(.divs)中，我正在尝试绑定动态内容。提供相同的类以将两个元素对齐在同一位置，即网页的右上角。但无论如何，div 部分的设计被破坏了。我可以理解，它在父 div 部分下并附加。所以这可能是原因，但有什么办法可以调整两个元素在同一位置的对齐方式CSS？

注意：虽然我jQuery对设计部分不感兴趣，但我也欢迎任何建议。还有一件事，Ajax调用中有一个循环，我在这里维护一个逻辑来单独获取每个数据，因此一次一个数据。只是为了澄清。

标签： htmljquerycsstwitter-bootstrap

解决方案

您可以尝试通过在.content对象<div style="clear: both;"></div>之后添加并添加float: right到来打破对象的浮动.divs > .wrapper

推荐阅读