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

您可以float和clear小块。

.smallblock1, .smallblock2, .smallblock3 {
  float: left; /* Push them to the left */
  clear: left; /* Stack them on top of each other */
}

通常，跟随浮动的元素会与边距框重叠。这可以通过强制元素建立block formatting context (BFC)来避免，例如在其上使用overflow: hidden。

.Largeblock { overflow: hidden; } /* Establish a block formatting context */

然后，要将大一个对齐，您可以使用direction。

#container { direction: rtl; }     /* Align the big block to the right */
#container > * { direction: ltr; } /* Restore the default value */

#container {
  width: 800px;
  height: 1000px;
  background-color: grey;
  direction: rtl;
}
#container > * {
  direction: ltr;
}
.smallblock1,
.smallblock2,
.smallblock3 {
  float: left;
  clear: left;
}
.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;
  overflow: hidden;
}

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

或者（但仍然浮动并清除小块），您可以display将大块inline-block。

.Largeblock { display: inline-block; } /* Align it according to text-align
                                          and make it establish a BFC */

这样它就会成为inline-level element，因此您可以使用text-align对齐它。

#container { text-align: right; }    /* Align the big block to the right */
#container > * { text-align: left; } /* Restore the default value */

此外，由于inline-block建立了块格式化上下文，因此不需要overflow: hidden。

#container {
  width: 800px;
  height: 1000px;
  background-color: grey;
  text-align: right;
}
#container > * {
  text-align: left;
}
.smallblock1,
.smallblock2,
.smallblock3 {
  float: left;
  clear: left;
}
.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;
  display: inline-block;
}

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

Answer 2

我不认为它是可能的，但是如果你可以将3个小块元素包装在容器中，你可以将它放在左边，将大块放在右边。或者，如果块的数量和形状可能不同，则可能需要查找类似于Masonry插件（http://masonry.desandro.com/）或Isotope（http://isotope.metafizzy.co/）的内容，以便JQuery定位元素。这些元素在列表中定位，使它们尽可能地形成网格，如窗口瓷砖，但它们使用相对定位，这可能不是你所听到的声音。

Answer 3

[class*="smallblock"] {
    float: left;
    clear:left;
}

.Largeblock {
  margin-left: 300px; /* only in this specific instance */
}

JSfiddle Demo

注意：这仅适用于这些特定的元素大小，因此无响应。

flexbox解决方案

#container {
  width: 800px;
  height:1000px;
  background-color:grey;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

[class*="smallblock"] {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 200px;
      -ms-flex: 0 0 200px;
          flex: 0 0 200px;
  width: 200px; 
}

.smallblock1 {
  background-color:black; 
}
.smallblock2 {
  background-color:red;    
}
.smallblock3 {

  background-color:yellow;      
}
.Largeblock {
  width:500px; 
  -webkit-box-flex: 0; 
  -webkit-flex: 0 0 1000px; 
      -ms-flex: 0 0 1000px; 
          flex: 0 0 1000px;
  background-color:blue;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}

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

Codepen Demo

相同的警告适用。

Answer 4

您可以通过重新排序html来解决此问题：

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

和css：

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

请参阅小提琴：https://jsfiddle.net/7z9vbxg3/10/或如前所述将它们包装在另一个容器中，例如：https://jsfiddle.net/7z9vbxg3/9/

将3个元素对齐，将另一个元素对齐

4 个答案: