平衡交替列布局CSS3 [英] balanced alternating column layout in CSS3
问题描述
我想创建一个平衡（2-）列布局。
内容不是文字，而是块和高度不同。
内容应该交替地左右放置，只要左和右有（大致）相同的高度。
在这个图像中：
1和3之间的空格shouldn'
或在此图片中：
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：
code> 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）;
}
（请参阅尝试1 和尝试2 column-count：2; column-fill：auto; ）
< ），但是这不会从左到右首先填充列。
没有JavaScript，这是否可能？
我会说这是不可能没有JS。这是一个小提琴我根据本荷兰的文章。至少对我来说，看起来像你在做什么。
HTML：
< body onload =setupBlocks（）;>
< div class =block>
< p> ***内容***< / p>
< / div>
< div class =block>
< p> ***内容***< / p>
< / div>
< div class =block>
< p> ***内容***< / p>
< / div>
< div class =block>
< p> ***内容***< / p>
< / div>
< div class =block>
< p> ***内容***< / p>
< / div>
< / body>
CSS：
code> .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
}
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）;
};
I'm trying create a balanced (2-) column-layout.
The content is not text but blocks and varies in height. The content should be placed alternatingly left and right, as long as "left" and "right" have (roughly) the same height..
I.e. in this image: The space between 1 and 3's shouldn't be there.
Or in this image: the 2's should stand alone on the right side and the 1, 3's and 4 should stand on the left side (without space between them).
I tried using "floating <li>'s" like this:
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);
}
I have also tried to use column's (column-count: 2; column-fill: auto;) but this does not fill the columns left-to-right first. (It fills top-to-bottom first.)
Is this even possible without JavaScript?
I would say this is not possible without JS. Here is a fiddle I made based on an article from Ben Holland. At least to me looks like what you are after.
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);
};
这篇关于平衡交替列布局CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
