왜이 CSS는 이미지를 크롬 열로 옮겨 놓지 않습니까

Question

이미지를 플로트하려 할 때 두 개의 열로 나누는 대신 하나의 큰 열에서 멈추게됩니다. 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

를 이미지 컨테이너는 두 개의 이미지 (플러스 여백/패딩)의 폭보다 큰 경우, 미만 세보다 만 남은 모든 이미지를 떠해야한다 그들은 2 열로 줄 것 : 이것처럼

:

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