11

我正在尝试创建一个平衡的（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);
}

（参见尝试 1和尝试 2）

我也尝试使用列的 ( column-count: 2; column-fill: auto;) 但这不会首先从左到右填充列。（它首先从上到下填充。）

如果没有 JavaScript，这甚至可能吗？

4

6 回答 6

5

我想说这是没有 JS 是不可能的。这是我根据 Ben Holland 的一篇文章制作的小提琴。至少对我来说看起来像你所追求的。

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);
};
于 2013-07-15T09:14:52.757 回答
2

更新：我相信这几乎不可能仅使用 CSS 来实现。有许多不同的解决方案，但除非您愿意使用 JavaScript 或某些服务器端代码，否则它们都需要一些妥协。

使用 CSS 列

这是使用重新排序的块的替代小提琴。这是一个使用 CSS 列而不重新排序的小提琴演示。

您可以使用CSS 列 将块流更改为垂直，除非您更改它们的输出顺序。如果你能先输出奇数，再输出偶数，你就赢了。

<div class="wrapper">
  <div class="block1">1</div>
  <div class="block3">3</div>
  <div class="block2">2</div>
  <div class="block6">4</div>
</div>

.wrapper {
    column-count: 2;
    column-width: 100px;
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    width: 260px;
}
div {
    border: 1px solid #999;
    display: inline-block;
    margin: 10px;
    width: 100px;
}
.block1 { height: 100px; }
.block2 { height: 130px; }
.block3 { height: 150px; }
.block4 { height: 100px; }

此解决方案与 IE9 及以下版本不兼容。

块高度已知

如果你知道你的块高度，你可以通过使用绝对定位来解决这个问题。

block1 {
  height: 100px;
  position: absolute;
  left: 0; 
  top: 0;
}

block2 {
  height: 110px;
  position: absolute;
  left: 0; 
  top: 100px; /* The height of the div above it */
}

一个很大的缺点是动态内容。我们很少知道区块高度。所以这个解决方案的应用非常有限，除非你愿意计算高度块的高度。

如果你愿意使用 JS

使用像 Masonry 这样的插件。无论是香草 js还是jQuery 风味。

其他选项

这为您留下了以下需要一些妥协的选项。

  1. 将您的块分组到列中。请参阅此 Fiddle 以获取演示。这会将块的流动改变为垂直，然后是水平。

  2. display: inline-block; vertical-align: top;在你的积木上使用。这将在您的块下方留下一些空白。

  3. 强制设置块的高度，这不是问题。对于具有附加内容的块，请使用该overflow属性以允许块内滚动。

  4. 正如其他人评论的那样，您可以尝试计算服务器上块的高度。

于 2013-07-15T14:20:53.030 回答
0

您可以尝试混合使用 flex 和 float （仅在 Firefox/IE10 和 safari 5.1.7 中测试，因为在我看来，CSS 不是您的解决方案）

http://codepen.io/gcyrillus/pen/zgAiw

但是，在您选择的任何 CSS 案例中，最好的方法是使用 mansonry 脚本。CSS 并没有真正适应这种布局。这时候你有很多 CSS 布局和基本方法：显示和浮动。

你可以很容易地在你的 html 树结构中使用它，但这些方法并不意味着混合使用。一个盒子将是浮动的，一个内联级盒子或块级盒子，并且每个盒子都假设在流程中进行交互。浮动，在非浮动元素之后在其自身之前换行或向下滑动直到它有足够的空间，您不会通过 CSS r 向右/向左调度。

inline-block 远离浮动元素并在没有足够空间时换行，inline-blocks 中的浮动元素将在浮动之前不断换行。

列 CSS 将用内容一一填充列。见：http ://codepen.io/gcyrillus/pen/AtazJ

Inline-flex 元素似乎可以与浮动元素一起使用......但它是否应该直到它成为一个经过验证的规则？

在我看来，明智的做法是使用 javascript 进行预期布局，并在 float 或 display:inline-block + width 上中继作为后备。

最后一个解决方案是在您的服务器端提前考虑这一点，并在可能的情况下将您的项目分派到 2 个容器中，并使用另一个适当的标记（不知道您在您的 中分派的真实生活内容ol li）。

FLEX 测试的 CSS ：

li.gruppe
{
  background: #048;
  color: white;
  font: bold 32px Arial, sans-serif;
  text-align: center;
  box-sizing:border-box;
  border-bottom:1px solid white;
   border-bottom:1px solid white;
    display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;  
  width:50%;
 }
li:nth-child(even){
  float:right;
  clear:right;
  border-left:1px solid white;
  margin-top:0;
}
于 2013-07-16T14:17:00.593 回答
0

编辑：这是一个有趣的解决方案，但不幸的是它不能解决所要求的问题。

我在这里提出的解决方案将后续元素放入交替列中，因此：1 -> 左、2 -> 右、3 -> 左、4 -> 右等。

这本身就是一个有趣的问题，但不是所要求的。

感谢评论中的@Nils 指出了这一点。

原始答案

这是我对 flex 的尝试！
https://jsfiddle.net/vqLr8t3e/

我不确定它是否适用于 IE11。

代码

.the-beginning {
  background: green;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.the-end {
  background: red;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.container-outer {
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 19999px;
  margin-top: -10000px;
}

.container > div {
  width: 50%;
  box-sizing: border-box;
  border: 5px solid grey;
  padding: 5px;
  background: white;
  order: 1;
}

.container > div:nth-child(odd) {
  order: -1;
}

.container > div:nth-child(1),
.container > div:nth-child(2) {
  margin-top: 10000px;
}
<div class="the-beginning">THE BEGINNING</div>
<div class="container-outer">
  <div class="container">
    <div>LEFT 0</div>
    <div>RIGHT 0<br>RIGHT 0</div>
    <div>LEFT 1<br>LEFT 1<br>LEFT 1</div>
    <div>RIGHT 1</div>
    <div>LEFT 2</div>
    <div>RIGHT 2<br>RIGHT 2<br>RIGHT 2</div>
  </div>
</div>
<div class="the-end">THE END</div>

主意

在容器和项目上使用flex-direction: column;和作为在列中显示项目的第一步。flex-wrap: wrap;width: 50%;

使用order: -1;andorder: 1将奇数和偶数元素排序到不同的列中。

margin-top: 10000px;在每列的第一个元素上使用 gratuitous ，max-height: 19999px;在容器上使用 a，这样一列中就不会出现两个这样的项目。这将确保这些项目中的每一个都从一个新列开始。用容器上的负边距顶部进行补偿。用带有 的外容器将其切掉overflow: hidden;。

于 2019-05-10T23:42:57.080 回答
-2

纯 CSS 解决方案：

将以下内容添加到您的 css 文件中：

ol.context li:nth-child(even) {
float: right;
}

不要更改您的 html 或其他任何内容。

结果在FF：

火狐渲染

--

这个怎么运作

我们不是将所有元素“向左”浮动并创建间隙，而是根据它们所在的元素的侧/列浮动每个容器。

于 2013-07-15T14:22:39.617 回答
-2

我不确定我是否做对了。.

“2 应该单独站在右侧，1、3 和 4 应该站在左侧（它们之间没有空间）。”

html:

<div id="box">
    <div class="data">1</div>
    <div class="data" style="float:right">2<br/>2<br/>2<br/>2</div>
    <div class="data">3<br/>3</div>
    <div class="data">4</div>
</div>

CSS：

#box {
    width:100%;
    height:auto;
    float:left;
}
.data {
    height:auto;
    width:50%;
    float:left;
    background-color:#ccc;
    border-bottom:solid 1px #000;
}

Fid：http: //jsfiddle.net/YdEW9/26/

这是纯CSS。然后将所有内容都提供给div 上的floated leftinline-cssfloat:right(4) 2's

我有点不知道如何在没有 javascript 的情况下设置 inline-css。服务器端可能吗？但我怀疑你能得到元素的高度。

无论如何，希望这会有所帮助。

于 2013-07-15T13:30:04.577 回答