플로팅 div를 뷰포트의 왼쪽으로 직접 분리하려면 어떻게해야합니까?

아래 예를 참조하고 뷰포트 너비를 천천히 줄이십시오.플로팅 div를 뷰포트의 왼쪽으로 직접 분리하려면 어떻게해야합니까?

뷰포트 너비가 축소됨에 따라 4 번째 div가 첫 번째 div 바로 아래에오고 다음으로 더 축소됨에 따라 1 위 아래 3 위 div, 2 위 아래 4 위가 필요합니다. 왜 이런 일이 일어나고 있는지 이해합니다. 나는 원하는 행동을하기 위해 무엇을해야할지 모르겠습니다.

도와주세요!

<html> 
<head> 
<style> 

.columnClass 
{ 
    float:left; 
    border: 2px solid; 
} 

</style> 
</head> 
<body> 

<div class="columnClass"> 
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="400" height="400"/> 
</div> 

<div class="columnClass"> 
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="200" height="600"/> 
</div> 

<div class="columnClass"> 
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="400" height="400"/> 
</div> 

<div class="columnClass"> 
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="200" height="600"/> 
</div> 

</body> 
</html>

출처

2013-02-20 Jordan Hudson

지금은 무엇입니까? –

아마도 div div에 모든 div를 넣고 너비를 100 %로 설정하면됩니다. –

지금은 4 번째 div가 3 번째 다이어그램 아래에 갇혀 있습니다. 나는 그것들을 왼쪽 가장자리에 직접 감싸고 싶지만, 그것이 플로트가 작동하는 방식이 아닌 것처럼 보인다. –

그에게 수업 매개 변수를 변경

.columnClass 
{ 
    display: inline-block; 
    vertical-align: top; 
    border: 2px solid; 
}

http://jsfiddle.net/N7usG/

여기에 내가 작업을 볼 수있는 이미지의 폭을 감소했습니다.

출처

2013-02-20 18:58:29

아, 이것이 내가 원했던 것입니다. 고마워! 나는 DiMono가 그것이 가능하지 않다고 말한 것을 알고 있지만, 제 4 사분기라면 제 1 사단을 만질 수 있도록 자신을 위로 할 수 있습니까? –

아니, 방법은 없습니다. jquery.masonry 라이브러리를 사용해 보시기 바랍니다. http://masonry.desandro.com/ –

오! 확실히 벽돌을 꺼내려고! –

float : left; 그들이 뭔가를 때릴 때까지 가능한 한 높이 떠있게됩니다. 당신의 경우, 당신은 교대 길이의 사진을 가지고 있습니다. 4 번째 선수의 좌상단이 2 번째 선수의 오른쪽 아래 구석에 닿았을 때, 그것이 멈추게됩니다. 그들이 길을 떠 당신이 그들이 원하는, 그래서

<style> 
.columnClass { 
    height: 600px; 
    float: left; 
} 
</style>

이, 용기를 일정한 높이를 제공해야합니다 : 당신이 대신 할 수있는 것은 이것이다.

출처

2013-02-20 18:43:47 DiMono

각 div의 내용이 사용자에 의해 CMS에 입력되므로 div가 끝나는 폭과 높이를 고려해야합니다. –

사실 높이가 다른 요소가있는 한 부동 상태 일 때 서로 충돌합니다. CSS에서 설정하지 않으려면 그룹에서 가장 큰 높이 값을 찾아서 높이 값으로 설정하여 자바 스크립트로 설정해야합니다. – DiMono

Gotcha. 자바 스크립트 솔루션을 이해합니다. 그러나, 네 번째 div가 왼쪽으로 끝까지 감싸는 것을 방해 할 수있는 방법이 없을까요? 자바 스크립트를 사용하여 높이를 최대로 높이면 여분의 공백이 생깁니다. –

플로팅 div를 뷰포트의 왼쪽으로 직접 분리하려면 어떻게해야합니까?

답변

관련 문제