Html CSS-如何按2列堆叠div_Html_Css

Html CSS-如何按2列堆叠div

html css

Html CSS-如何按2列堆叠div,html,css,Html,Css,我有一个可变数量的div，它应该显示在两行上，如下所示 [1] [3] [5] [7] [2] [4] [6] ... 我查看了column count属性，但是它并不完全是我所需要的，因为它固定了列的数量，而在我的例子中，它应该是动态的。（我需要的是一个类似的line count属性，它似乎不存在）是否有一个纯CSS解决方案，或者我应该为每个2个垂直div的组创建容器div 谢谢编辑：这是我案例的简化代码。实际上，当我在container div上设置height属性时，

我有一个可变数量的div，它应该显示在两行上，如下所示

[1]  [3]  [5]  [7]

[2]  [4]  [6]  ...

我查看了

column count

属性，但是它并不完全是我所需要的，因为它固定了列的数量，而在我的例子中，它应该是动态的。（我需要的是一个类似的line count属性，它似乎不存在）

是否有一个纯CSS解决方案，或者我应该为每个2个垂直div的组创建容器div

谢谢

编辑：这是我案例的简化代码。实际上，当我在container div上设置

height

属性时，article div不应该最多堆叠2个吗？现在他们把容器溢出来了

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="container">
<div class="article">A</div>
<div class="article">B</div>
<div class="article">C</div>
<div class="article">D</div>
<div class="article">E</div>
</div>
</body>
</html>

但是，使用此代码时，所有文章div都在一列中。

当我必须执行类似操作时，我使用float属性，并将类似代码应用于要显示的每个div：

.divclass{
    float: left;
    margin: 10px;
    width: 300px;
}

不要忘记在div列表后清除float：

<br stytle="clear: both;">

通过这种结构，我可以在屏幕宽度上放置尽可能多的div，并将其他div放在新的行上。显然，每行的div数取决于屏幕宽度或容器div宽度。

如果您提供更多的代码，您可以获得更多帮助。

下面是一个网格示例，其中每行的元素为4个

您可以根据需要调整

.container

元素的大小。如果您不想支持

vw

单元

为什么

widt:22%？

合乎逻辑的方法是设置宽度：如果我们想要4个元素，25%正确？4x25=100。

尝试将下面的代码编辑为：）
如您所见，它将换行为新行。
将其设置为略低于23%或22%，我选择了22%。

现在，您有了一些用于边界边距和填充的空间。
如果您想让它们彼此完美贴合。

设置框大小：边框框。

和0边距0填充（无空白）宽度为25%。会让你接近完美的身材

.container{
宽度：50vw；
边框：5px纯红；
}
.容器.物品{
显示：内联块；
边框：2块实心耐火砖；
宽度：22%；
高度：50px；
}

对于

列计数

用一个简单的列表标记

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
<ul>

另一个选项是CSS3，如下所示： CSS3解决方案如下所示：

HTML

您可以在

中查看更多详细信息。您可以使用flexbox和

flex direction:列来执行此操作
这样做将允许您在到达父元素的底部后拥有新的列
以下是一个例子：

*
{
框大小：边框框
}
.灵活父母
{
显示器：flex；
柔性流：柱包裹；
/*这表示新“列”将在何时启动*/
高度：200px；
调整内容：灵活启动；
}
.flex parent.col
{
flex:0自动；
宽度：100px；
高度：50px；
背景颜色：银色；
保证金：4倍；
}

1.
2.
3.
4.
5.
6.
7.
8.
10
11
12
您可以在容器上使用列
css属性：

#列保持器{
-moz柱：100px；
-webkit柱：100px；
色谱柱：100px；
-moz柱间距：15px；
-webkit柱间隙：15px；
柱间距：15px；
}
.盒子{
宽度：100px；
高度：100px；
边缘底部：15px；
背景：灰色；
-webkit列内部中断：避免；
内部分页符：避免；
破门而入：避免；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
您能提供您当前的代码吗？div的高度是固定的？您好，谢谢您的回答！但我需要它的另一种方式，即一旦你填写了一列（2个元素），你切换到一个新的行：）啊，它几乎是这样！但是，如果我为“box”div设置了一个高度，那么第2部分的上半部分在第一列，下半部分在第二列。你知道如何防止这些积木像这样被切割吗？是的，它几乎是完美的。但这种方法的问题是，如果我只有2个div，它们仍然会被切成两半，然后扩散到整个宽度。我使用了flex-flow:column-wrap来自Nico O的回答。我想列：
最适合用于文本，而较少用于实体块？但是谢谢！冷静别担心，很高兴你找到了解决方案谢谢你的回答！实际上，column count修复了2列，而我需要2行，并且需要多少列就需要多少列。所以我需要像行计数这样的东西。你知道我怎么做吗？谢谢！这就是诀窍！只剩下一点，使用display:flex，“col”div之间的间距取决于页面的宽度。但我需要两个沙发相隔20像素。是否有办法确定列的最大宽度（或框的最大边距）？当然，只需应用align content:flex start到flex父级。请参阅更新的答案。您可以将margin:4px
更改为margin:10px使项目的总间距为20像素。非常欢迎。-当您需要safari支持时，您需要添加-webkit-
前缀。谢谢您的想法！实际上，我需要将它们按2列进行堆叠。所以我尝试替换float:left按浮动：顶部
，但即使清除了：两个，并且父div具有最大高度，子div仍然堆叠在单个列上。你知道吗？把浮子放在左边。调整容器宽度和div宽度以获得所需的div。如果您有一个600px的容器，而div是300px，那么可以将它们放在两列上（如果您不计算边距）
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
<ul>

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

<div id="wrap">
    <div class="list_item">A</div>
    <div class="list_item">B</div>
    <div class="list_item">C</div>
    <div class="list_item">D</div>
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

.list_item {
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}