다양한 옵션을 선택하기위한 패널을 나타내는 동적으로 생성 된 div 목록이 있습니다. div에는 일반 유형과 짧은 유형의 두 가지 유형이 있습니다. 일반 div의 높이는 javascript로 설정되어 가장 높은 높이로 설정됩니다. 또한 짧은 짧은 div의 높이가 최대 높이의 절반보다 작 으면 높이의 절반으로 설정되고, 그렇지 않으면 전체 높이로 설정됩니다.더 짧은 div로 왼쪽 div를 anoter 아래에 플로팅하는 방법
내가 지금하고 싶은데 (CSS가있는 것이 바람직 함) 충분한 공간이 있다면 다른 div 아래에 하나의 짧은 div를 두는 것과 같은 방식으로 항목을 나열하는 것이 좋습니다.
는 더 일반적인 순수 CSS의 솔루션이 없습니다.
후보 기술의 비교 광산의 이전 답변을 참조하십시오 :
수동으로 픽셀을 계산하고 position: relative/position: absolute; top: ?px; left: ?px 사용하는 서버 측 코드를 사용하지 않는 한, 당신을 위치 정보를 처리하려면 JavaScript에 의존해야합니다.
이 jQuery 플러그인은 일반적으로 좋은 솔루션입니다 : Vanilla Masonry
나 자신이 어느 정도 정기적으로 추천 발견 :
https://stackoverflow.com/search?q=user%3A405015+masonry
일부 가능하게 관련을 jQuery Masonry
또한 원시 자바 스크립트 버전있다 데모 :
결국 나는 작은 트릭을 할 jquery 함수를 작성했지만, Masonry 플러그인을 지적 해 주셔서 감사합니다. 흥미 로워 보이고 비슷한 것을 요구할 때 명심해야합니다. – alh84001
, 이것은 순수 CSS 불가능 : 여기
희망 일을 명확하게하기 위해 어떤 그림 당신은 작은 상자를 제공하는 경우clear: left이면
모두 기타로 표시됩니다. 그렇지 않으면 서로 옆에 나타납니다.
내가 생각할 수있는 가장 간단한 해결 방법은 수동으로 두 개의 작은 상자를 별도의 div로 그룹화하는 것입니다. 다음은 작업 예입니다
<html>
<head>
<style type="text/css">
div.large, div.small { width: 40px; margin: 5px; }
div.large { height: 95px; background-color: blue; }
div.small { height: 45px; background-color: red; }
div.large, div.smallblock { float: left; }
</style>
</head>
<body>
<div class="large">1</div>
<div class="large">2</div>
<div class="smallblock">
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="smallblock">
<div class="small">5</div>
<div class="small">6</div>
</div>
<div class="large">7</div>
</body>
</html>
나는이 질문에 대한 답을보고 매우 궁금 - 나는 또한 HTML/CSS 수직 모든 일에 문제가 많이 있습니다. 그것도 당신을 위해 볼 것입니다. – Marty