设计使用 jQuery 创建的 HTML 元素答案

【问题标题】：Design HTML Element Created With jQuery设计使用 jQuery 创建的 HTML 元素
【发布时间】：2020-10-08 04:13:57
【问题描述】：

我正在使用来自服务器端的Ajax 调用创建HTML 元素。现在的问题是，网页的设计是响应式的。不知何故，我无法按预期将动态生成的元素与页面对齐。用下面的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 部分下并附加。所以这可能是原因，但是有什么方法可以调整两个元素在同一位置的对齐方式@987654326@？

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

【问题讨论】：

从您的描述中并不太清楚出了什么问题。 HTML 是否未正确更新？你需要额外的 CSS 来正确对齐吗？如果您可以在 AJAX 调用之后提供 呈现的 HTML 示例，那将非常有帮助。（另外，请注意，您的 AJAX 调用无法在后续调用中清除 html 变量。）
div 部分 .divs 中的内容实际上并没有像标题 h4 @kmoser 那样与右上角对齐。跨度>
你能分享完整的样式吗？在示例中，您仅定位 .content 元素。

标签： html jquery css twitter-bootstrap

【解决方案1】：

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

【讨论】：

此部分<div style="clear: both;"> 将放在div 的结束标记之前，类似于<div class="wrapper"><div class="content">Dynamic data here</div><div style="clear: both;"></div> @vodkaJedi？
@user8512043 不，你的.content 对象是float: right，所以我的想法是用<div style="clear: both;"></div> 打破“浮动”。
看看你能不能在这里提供解决方案 - stackoverflow.com/questions/64290532/…@vodkaJedi。