為什么這個CSS不會將圖片浮動到chrome列中

Question

當我嘗試浮動圖像時，它們停留在一個大列中，而不是分成兩列。 浮動代碼在這里朝向CSS的底部。 為什么會這樣呢？

我也會發布html，但是無論何時我都會自動將其轉換為顯示內容：(？

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

a h1 {
  text-align: center;
}

.main-header{
  padding-top: 17px;
  height: 850px;
  background: linear-gradient(#fff, transparent 40%),
            linear-gradient(0deg, #fff, transparent 50%),
            url('../MarxBros.jpg') no-repeat center;
 }

.intro{
  text-align: center;
 }
 .secondary-content{
   width: 45%;
   padding-left:50px;
   padding-right: 50px;
   margin:auto;
   max-width:960px;
 }

.quote1,.quote3,.quote5{
  float:left;
 }
.quote2,.quote4,.quote6{
  float:right;
 }
.group:after {
  content: "";
  display: table;
  clear: both;
 }

Answer 1

如果圖像容器大於兩個圖像的寬度（加上邊距/填充），但小於三個，則只需要向左浮動所有圖像，它們將在兩列中對齊：

像這樣：

CSS：

.container {
width:600px;
height:600px;
border:1px solid #282828;
padding:-10px;
}
.box {
width:200px;
height:200px;
margin:20px;
background: #ebebeb;
float:left;
}

HTML：

<div class = "container">
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
</div>

小提琴這里