html - 为什么这个 CSS 不会将图像 float 到 chrome 的列中

Question

当我尝试 float 我的图像时，它们停留在一个大列中，而不是分成两列。 float 代码位于此处的 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>

fiddle HERE