不使用列包装器并排浮动堆叠的div

Question

我试图让堆叠的div看起来就像在一列中一样。由于正在使用的应用程序，我无法直接编辑html。问题是右栏在文档中往下推得更远。我希望它们在顶部对齐。通常，我会将每一面都包装在一个div中，并对它们进行浮动或内联阻塞。我也无法使用像.wrapAll()这样的jQuery将所需的html注入到文档中。任何帮助或阅读都将不胜感激。谢谢。

该代码的一个示例位于以下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/