Css 2列浮点数浪费空间_Css_Css Float

Css 2列浮点数浪费空间

css

Css 2列浮点数浪费空间,css,css-float,Css,Css Float,我有一个容器div，我想在里面装一个可变数量的divs，高度未知（可变），但最小宽度给定。我的要求是：如果容器足够宽，可以容纳两列，那么我希望它们能够很好地分布在两列中，而不需要不必要的空白不是的，他们应该超越对方目前，我给了divswidth:48%的右边距：2%；浮动：左在单列状态下运行良好，但当我调整浏览器窗口的大小，为两列留出空间时，每一个位于左列的div都坚持将自己与位于右侧的最后一个div的底部水平对齐：这是我希望他们的方式（没有浪费空间）：如果可能的话，我想要一个纯C

我有一个容器

div

，我想在里面装一个可变数量的

div

s，高度未知（可变），但最小宽度给定。我的要求是：

如果容器足够宽，可以容纳两列，那么我希望它们能够很好地分布在两列中，而不需要不必要的空白

不是的，他们应该超越对方

目前，我给了

div

width:48%的右边距：2%；浮动：左

在单列状态下运行良好，但当我调整浏览器窗口的大小，为两列留出空间时，每一个位于左列的

div

都坚持将自己与位于右侧的最后一个

div

的底部水平对齐：

这是我希望他们的方式（没有浪费空间）：

如果可能的话，我想要一个纯CSS解决方案

谢谢大家!/古斯塔夫

编辑：这个标记说明了我的问题：

<html>
<head>
<style type="text/css">
.box {
  width: 48%;
  min-width:550px;
  margin-right:2%;
  margin-bottom: 1.5em;
  background:blue;
  color:white;
  height:180px;
  float:left;
}

.tall {
  height: 250px;
}

</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>


.盒子{
宽度：48%；
最小宽度：550px；
保证金权利：2%；
边缘底部：1.5em；
背景：蓝色；
颜色：白色；
高度：180像素；
浮动：左；
}
.高{
高度：250px；
}
1.
2.
3.
4.
5.
6.

.box

es是动态生成的，它们的高度也是动态生成的，我只是加了一个更高的来说明。

我相信，如果每列都有一个div，并将编号的div放入其中，您将得到想要的结果。大概是这样的：

<div class="containerDiv">
    <div class="column">
        <div class="content">
            1
        </div>
        <div class="content">
            4
        </div>
    </div>
    <div class="column">
        <div class="content">
            2
        </div>
        <div class="content">
            3
        </div>
    </div>
</div>


1.
4.
2.
3.

下一步似乎是“如何平衡我的列”。某些代码正在生成您提到的框。它决定了每个盒子的高度。在将请求转发给JSP进行表示之前，此代码需要为每列生成一个平衡的框列表。所谓平衡，我的意思是“column1的高度与column2的高度相似”

我认为纯CSS无法达到预期效果。我曾经复制过你想要的效果，效果非常好

我很想看到一个纯CSS解决方案，但还没有看到任何解决方案。

如果你想要一个纯CSS解决方案，也许你应该发布你的标记和CSS而不是屏幕快照。我唯一能想到的是。奇数框{float:left；}。偶数框{float:right；}但问题是，如果容器比.box div宽，则会得到分散的布局。有点希望这能激发一些想法。我发现这种方法很困难，因为我不知道每个

内容将有多高，因此不知道将其附加到哪个列。或者更确切地说，下一个。。。此外（假设列
是浮动的），当“折叠”到一列时，顺序会很奇怪。在某种程度上，这就是我所希望的答案。（当然还有恐惧）。页面上的第三句话明确指出：“而floating先水平排列元素，然后垂直排列”。不过看起来很棒，非常感谢！