html - 在 div 中堆叠元素时遇到问题

我试图在一个 div 中堆叠两个元素，但在这样做时遇到了问题。我的理想结果是(基本上)有三列，第一列中有 block 1 和 block 2，第二列和第三列中有 block 3 和 4(如我的示例所示)。

这就是我现在得到的:

这是我想要得到的:

这是我的代码:

#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?*/
}

<!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>

提前感谢您提出的任何建议!

更新代码:

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

#StackedBlocks {
    display: inline-block;
}

<!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>

最佳答案

使用 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>

关于html - 在 div 中堆叠元素时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45549878/

html - 在 div 中堆叠元素时遇到问题

上一篇：css - 在 li 元素前面追加一个元素

下一篇：html - 如何选择第3、4、7、8、11里？