html - 将 3 个元素排成一行，另一个元素排在一边

Question

我有 4 个元素需要相对对齐:

• 前三个需要堆叠成一列
• 第四个(蓝色框)应与列的右侧对齐。

HTML代码如下，不可修改:

<div id="container">
  <div class="smallblock1"></div>
  <div class="smallblock2"></div>
  <div class="smallblock3"></div>
  <div class="Largeblock"></div>
</div>

是否可以在不使用绝对定位的情况下实现所需的 CSS 对齐？

#container {
  width: 800px;
  height: 1000px;
  background-color: grey;
}
.smallblock1 {
  width: 200px; 
  height:200px;
  background-color:black; 
}
.smallblock2 {
  width: 200px; 
  height:200px;
  background-color:red;  
}
.smallblock3 {
  width: 200px; 
  height:200px;
  background-color:yellow;      
}
.Largeblock {
  width:500px; 
  height:1000px;
  background-color:blue;   
}

<div id="container">
  <div class="smallblock1"></div>
  <div class="smallblock2"></div>
  <div class="smallblock3"></div>
  <div class="Largeblock"></div>
</div>

Answer 1

我不认为这是可能的，但如果你可以将 3 个小块元素包装在一个容器中，你可以将它放在左边，将大块放在右边。或者，如果 block 的数量和形状可能不同，可能值得研究 Masonry 插件 ( http://masonry.desandro.com/ ) 或 Isotope ( http://isotope.metafizzy.co/ ) 之类的东西，以便 JQuery 定位元素。它们将元素放置在列表中，以便它们尽可能形成网格，就像 window 瓷砖一样，但它们使用相对定位，这可能不是您听起来所追求的。