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>

小提琴HERE

为什么这个CSS不会将图像浮动到chrome中的列中

1 个答案: