我正在使用bootstrap通过向左和向右浮动并使用'clear'来填充两列中的元素（带有文本内容的div块），或者在每个元素上。根据每个元素的高度，仅在右列上的两个堆叠元素之间存在间隙。
我不确定如何绕过它。这是我用过的代码：
.wrapper{
width: 1000px;
}
.cl{
clear: left;
}
.cr{
clear: right;
}
.bubble{
width: 400px;
box-sizing: border-box;
display: block;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
.fl{
float: left;
}
.fr{
float: right;
}<div class="wrapper">
<div class="col-mde-6 bubble fl cl">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but </p>
</div>
<div class="col-mde-6 bubble fr cr">
<p>
asdasd ad asd asd as
</p>
</div>
<div class="col-mde-6 bubble fl cl">
<p>
rem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always
</p>
</div>
<div class="col-md-6 bubble fr cr">
<p>
n in some form, by injected humour, or randomised words which don't loo </p>
</div>
</div>
这里还有一个codepen来说明我的问题。无论如何要实现这个目标吗？
http://codepen.io/falc0nit3/pen/aOamLY
我也注意到RT site他们使用了类似的技术，并且在他们的评论家和观众评论部分也遇到了同样的问题。
编辑：元素的排序很重要，目标是当浏览器调整为较小的窗口时，右列上的元素将合并到其左侧立即元素列下方。所以实际的排序保持一致。想想任何2列评论系统，其中顶级元素的优先级高于低级元素。
答案 0 :(得分：1)
我已经回到第2轮了，这次考虑了各部分的预定顺序，这是我提出的解决方案。当你从中等屏幕切换到小屏幕等时，你可能需要调整屏幕比较宽度的实际值，但这应该给你一般的要点。
再次使用jquery（因为你没有反对它）
$(document).ready(function() {
$(window).on('resize', function() {
console.log($(this).width());
if ($(this).width() < 975) {
$('.first .sec1').each(function () {
var elem = $('.second .sec2:first-child');
$(this).after(elem);
});
}
else {
$('.sec2').each(function() {
$(this).appendTo('.second');
});
}
});
$(window).trigger('resize');
});.section {
margin-top:5px;
padding:5px;
border: 1px solid lightgray;
display:inline-block;
width: 100%;
}
.col-md-6 {
padding:5px;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 first col-sm-12">
<div class="section sec1">
SECTION 1: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
<div class="section sec1">
SECTION 3: I have content here. I have content here.
</div>
<div class="section sec1">
SECTION 5: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
<div class="section sec1">
SECTION 7: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- first -->
<div class="col-md-6 second col-sm-12">
<div class="section sec2">
SECTION 2: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
<div class="section sec2">
SECTION 4: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
<div class="section sec2">
SECTION 6: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- second -->
</div> <!-- container -->
答案 1 :(得分：0)
尝试将每列放入包含div：
<div class="wrapper">
<div class="col-mde-6 fr cr">
<div class="bubble">
<p>
asdasd ad asd asd as
</p>
</div>
<div class="bubble">
<p>
n in some form, by injected humour, or randomised words which don't loo </p>
</div>
</div>
<div class="col-mde-6 fl cl">
<div class="bubble">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but </p>
</div>
<div class="bubble">
<p>
rem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always
</p>
</div>
</div>
</div>
这是一个更新的codepen，说明了这一点： http://codepen.io/anon/pen/ZGMmgW
答案 2 :(得分：0)
这个答案有jquery。我知道这不是你明确要求的，但如果你对它开放，那么它就是：
它没有系统地交替（1个左侧col，下一个右侧col，下一个左侧col）。它测量柱子的高度，并将下一部分放入最短的列中，以更好地平衡它们的高度。
http://jsfiddle.net/swm53ran/296/
$(document).ready(function() {
var first = $('.first');
var second = $('.second');
$('.toBePlaced > .section').each(function () {
var height = $(this).height();
var lowest = first;
if (first.height() < lowest.height()) { lowest = first; }
if (second.height() < lowest.height()) { lowest = second; }
$(this).appendTo(lowest);
});
});
<div class="container">
<div class="col-xs-6 first">
<div class="section">
SECTION 1: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- first -->
<div class="col-xs-6 second">
<div class="section">
SECTION 2: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- second -->
</div> <!-- container -->
<div class="toBePlaced col-xs-4">
<div class="section">
SECTION 3: I have content here. I have content here.
</div>
<div class="section">
SECTION 4: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div>