我试图使堆叠的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>
答案 0 :(得分: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%;
}