Question

我正在尝试在div中堆叠两个项目并且遇到麻烦。我理想的结果是在第一列中有三列（基本上）带有块1和2，在第二列和第三列中有块3和4（如我的例子中所示）。

这就是我现在所得到的：

这是我想要的：

这是我的代码：

＆＃13;

#Blocks {
  display: inline-block;
  width: 25%;
  height: 300px;
  border: 25px solid #ff6a00;
  padding: 25px;
  margin: 25px;
}

#StackedBlocks {
  display: inline-block;
  /*What else should go here?*/
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <link rel="stylesheet" type="text/css" href="StyleSheet.css">
  <title>Site</title>

</head>

<body>
  <div id="Blocks" class="all">
    <div id="StackedBlocks">
      block 1
    </div>
  </div>
  <div id="Blocks" class="all">
    <div id="StackedBlocks">
      block 2
    </div>
  </div>
  <div id="Blocks" class="all">
    block 3
  </div>
  <div id="Blocks" class="all">
    block 4
  </div>
</body>

</html>

＆＃13;

提前感谢您提出任何建议！

更新代码：

＆＃13;

.all{
  width: 100px;
  height: 300px;
  border: 25px solid #ff6a00;
  padding: 25px;
  margin: 25px;
  float: left;
}

#StackedBlocks {
    display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    <title>Site</title>

</head>
<body>
    <div id="StackedBlocks">
        <div id="block1" class="all">
            block 1
    </div>
    <div id="block2" class="all">
            block 2
        </div>
    </div>
    <div id="block3" class="all">
        block 3
    </div>
    <div id="block4" class="all">
        block 4
    </div>
</body>
</html>

＆＃13;

Answer 1

将前两个包裹在另一个DIV中怎么样？

＆＃13;

.Blocks {
  display: inline-block;
  width: 25%;
  height: 50px;
  border: 5px solid #ff6a00;
  padding: 25px;
  margin: 25px;
}
.Blockswrapper {
  display: inline-block;
  border: 1px solid green;
}

＆＃13;

<div class="Blockswrapper">
  <div class="Blocks" class="all">
    <div class="StackedBlocks">
      block 1
    </div>
  </div>
  <div class="Blocks" class="all">
    <div class="StackedBlocks">
      block 2
    </div>
  </div>
</div>


<div class="Blocks" class="all">
  block 3
</div>
<div class="Blocks" class="all">
  block 4
</div>

＆＃13;

Answer 2

不要重复使用ID，而是在类上使用样式。我认为最好的方法是用css-tricks中的一个真实例子来解释它：

这里可能有一个很好的比喻条形码和序列号。在商店里拿iPod。在包装上将是条形码。这告诉商店产品是什么，因此在扫描时，系统确切知道产品是什么以及产品成本。它甚至可以知道它是什么颜色或在商店里保存的位置。所有相同类型的iPod都有完全相同的条形码。

iPod上还有一个序列号，绝对是世界上任何其他iPod（或任何其他设备）所独有的。序列号不知道价格。它可以，但对于商店来说，这不是一种非常有效的方式来存储和使用这些数据。使用条形码要容易得多，例如，如果价格发生变化，您只需更改该条形码的价格，而不是系统中每个序列号的价格。

这与ID's和Classes非常相似。可重复使用的信息应保存在class中，完全唯一的信息应保存在ID中。

除此之外，如果您想将elementsnext放在一起，我建议您使用float:left代替display:inline-block。然后css看起来像这样：

.all {
  width: 100px;
  height: 300px;
  border: 25px solid #ff6a00;
  padding: 25px;
  margin: 25px;
  float: left;
}

修改

关于网格的主题，如果您想了解更多相关内容，我可以推荐这篇css-tricks文章和引导网格系统：

Answer 3

使用display:flex.

不要重复使用id

body
{
  display:flex;
}

.Blocks {
   flex:1;
   border:1px solid black;
}

.StackedBlocks {
    height: 150px;
    border: 25px solid #ff6a00;
    margin:10px;
    /*What else should go here?*/
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    <title>Site</title>

</head>
<body>
    <div class="Blocks" class="all">
        <div class="StackedBlocks">
            block 1
        </div>
        <div class="StackedBlocks">
            block 2
        </div>
    </div>
    <div class="Blocks" class="all">
      <div class="StackedBlocks" class="all">
          block 3
      </div>
      
    </div>
    <div class="Blocks" class="all">
      <div class="StackedBlocks" class="all">
          block 4
      </div>
    </div>
</body>
</html>

Answer 4

我更喜欢使用flexbox来创建列，它们总是大小合适。和其他人一样，我会将前两个框放在一个div元素中。示例：https://codepen.io/anon/pen/EvWYyy

HTML：

<div class="columns">
  <div class="col">
    <div class="block">Block 1</div>
    <div class="block">Block 2</div>
  </div>
  <div class="col">
    <div class="block">Block 3</div>
  </div>
  <div class="col">
    <div class="block">Block 4</div>
  </div>
</div>

CSS

body {
  margin: 0;
}

.columns {
  display: flex;
}

.col {
  flex-grow: 1;
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.block {
  height: 300px;
  border: 25px solid #ff6a00;
  margin: 10px;
  padding: 4px;
}

Answer 5

简短回答：Flexbox

替代答案

您可以在.wrapper div上使用column-count来垂直堆叠内部div元素

这可以根据内容进一步调整以获得更好的响应性。

工作示例：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0
}

.Blocks {
  display: inline-block;
  width: 100%;
  height: 300px;
  border: 25px solid #ff6a00;
  margin: 25px auto;
}

.wrapper {
  width: 95%;
  margin: 1em auto;
  column-count: 3
}

＆＃13;

<div class="wrapper">
  <div class="Blocks">
    block 1
  </div>
  <div class="Blocks">
    block 2
  </div>
  <div class="Blocks">
    block 3
  </div>
  <div class="Blocks">
    block 4
  </div>
  <div class="Blocks">
    block 5
  </div>
  <div class="Blocks">
    block 6
  </div>
  <div class="Blocks">
    block 7
  </div>
  <div class="Blocks">
    block 8
  </div>
</div>

＆＃13;

在div中堆叠项目时遇到问题

5 个答案:

修改

替代答案