我正在尝试创建平衡的(2-)列布局。
内容不是文本，而是块，并且高度不同。
只要“左”和“右”具有(大约)相同的高度，内容就应该左右交替放置。
IE。在此图像中:
1和3之间的空格不应该存在。
或在此图像中:
2个应单独位于右侧，而1个，3个及4个则应位于左侧(它们之间没有空隙)。
我尝试像这样使用“floating <li>”:
HTML:
<ol class="context">
<li class="gruppe">1</li>
<li class="gruppe">2.0<br />2.1</li>
<li class="gruppe">3.0<br />3.1</li>
<li class="gruppe">4</li>
</ol>
CSS:
ol.context
{
border: 1px solid #048;
list-style: none;
margin: 0;
padding: 0 0 8px 0;
overflow: auto;
}
li.gruppe
{
background: #048;
color: white;
float: left;
font: bold 32px Arial, sans-serif;
margin: 1px;
text-align: center;
width: calc(50% - 2px);
}
(请参阅attempt 1和attempt 2)
我也尝试过使用列的(
column-count: 2; column-fill: auto;)，但这不会首先填充从左到右的列。 (它首先从上到下填充。)如果没有JavaScript，这是否有可能？
最佳答案
我想说如果没有JS，这是不可能的。这是我根据本·霍兰德(Ben Holland)的一篇文章制作的 fiddle 。至少对我来说，你看起来像什么。
http://jsfiddle.net/QWsBJ/2/
HTML:
<body onload="setupBlocks();">
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
<div class="block">
<p>***Content***</p>
</div>
</body>
CSS:
.block {
position: absolute;
background: #eee;
padding: 20px;
width: 300px;
border: 1px solid #ddd;
}
JS:
var colCount = 0;
var colWidth = 0;
var margin = 20;
var blocks = [];
$(function(){
$(window).resize(setupBlocks);
});
function setupBlocks() {
colWidth = $('.block').outerWidth();
colCount = 2
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':leftPos+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
Array.min = function(array) {
return Math.min.apply(Math, array);
};
关于css - CSS3中的平衡交替列布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17597956/