CSS3中平衡的交替列布局
我正在尝试创建一个平衡的(2-)列布局.
内容不是文本,而是块,高度不同.只要"左"和"右"具有(大致)相同的高度,内容就应该左右交替放置.
即在这张图片中:
1到3之间的空间不应该存在.
或者在这张图片中:
2'应该独立在右侧,1,3和4应该站在左侧(它们之间没有空间).
我尝试使用<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);
}
我也尝试使用列的(column-count: 2; column-fill: auto;)但这不会首先从左到右填充列.(它首先从上到下填充.)
没有JavaScript,这甚至可能吗？
我会说如果没有JS,这是不可能的.这是我根据Ben Holland的一篇文章制作的小提琴.至少在我身上看起来像你在追求什么.
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);
};
- 我同意你的看法,如果没有Javascript,这是不可能的,虽然我的理由只是"我想不出没有Javascript的方法." 一个更具体的论证/证明,用纯CSS无法做到这一点很好,我想,虽然我也想不到其中的一个.无论如何,+1. (2认同)