jquery - 在没有列包装器的情况下并排 float 堆叠的 div

Question

我试图让堆叠的 div 看起来好像在一列中。由于正在使用应用程序，我无法直接编辑 html。问题是右列被推到文档的更下方。我希望它们在顶部对齐。通常我会把每一边都包裹在一个 div 中，然后 float 或内联阻止它们。我也无法使用 .wrapAll() 之类的 jQuery 将所需的 html 注入(inject)文档。任何帮助或阅读将不胜感激。谢谢。

代码示例在这个 jsfiddle https://jsfiddle.net/itivae/30xhjwcz/5/

    <style>
        .content-wrapper {
            position: relative;
            overflow: hidden;
        }
        .div-1, .div-2, .div-3, .div-4, .div-5 {
            float: left;
            width: 100%;
            max-width: 48%;
            clear: left;
            position: relative;
        }
        .div-6, .div-7, .div-8, .div-9, .div-10, .div-11, .div-12 {
            float: right;
            width: 100%;
            max-width: 48%;
            clear: right;
            position: relative;
        }
   </style>
   <div class="content-wrapper">
       <!--This is the left column-->
       <div class="div-1">Content</div>
       <div class="div-2">Content</div>
       <div class="div-3">Content</div>
       <div class="div-4">Content</div>
       <div class="div-5">Content</div>
       <!--End left "column"-->
       <!--Start right column-->
       <div class="div-6">Content</div>
       <div class="div-7">Content</div>
       <div class="div-8">Content</div>
       <div class="div-9">Content</div>
       <div class="div-10">Content</div>
       <div class="div-11">Content</div>
        <div class="div-12">Content</div>
        <!--End right Column-->
    </div>

Answer 1

您的主要问题是包装类的相对位置，每边的宽度都需要小于 100%。有时最好回过头来思考简单的问题。

.content-wrapper {
  width: 100%;
  overflow: hidden;
}
.div-1, .div-2, .div-3, .div-4, .div-5 {
  float: left;
  width: 50%;
}
.div-6, .div-7, .div-8, .div-9, .div-10, .div-11, .div-12 {
  float: right;
  width: 50%;
}

https://jsfiddle.net/4ezcbkmo/