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/

浮动并排的div，没有列包装器

1 个答案: