블록 div 위의 수직 공간을 채우는 방법?

나는 컨테이너 div를 가지고 있는데,이 div에는 같은 클래스의 div가 모두 포함되어있다. 다양한 div의 내용은 동적이며 div 블록의 높이를 높입니다. 너비는 고정 된 값으로 설정되어 2 collumn을 만듭니다. 나는 첫 번째 div가 왼쪽으로 떠 다니는 상황을 겪었고, 다음 두 div는 첫 번째 div보다 개별적으로 더 짧습니다. 그러나 결합되면 첫 번째 div를 넘어 왼쪽 div로 확장됩니다. 다음 네 번째 div는 첫 번째 div 아래의 첫 번째 열로 다시 플로팅되지만 첫 번째 div 바로 아래에 "위로"플로팅되지 않습니다. 세 번째 div 블록 아래에 세로 위치가 놓여져 왼쪽으로 떠있는 것으로 표시됩니다. 이 문제를 해결할 방법이 있습니까?블록 div 위의 수직 공간을 채우는 방법?

루프를 통해 컨테이너 div 내에 각 div를 생성하므로 결과적으로 각 div에 대해 일관된 스타일 클래스를 갖고 싶습니다. 하나의 스타일 클래스로 그렇게 할 수 없다면, PHP 스크립트로 채우기 후에 div의 높이를 얻는 방법이 있습니까? 당신이 원하는 것은 '벽돌'스타일의 레이아웃처럼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Dynamic Div Test</title> 
<style> 
.container2 { 
    width: 1000px; 
    display: block; 
    position: relative; 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0px; 
    background: #000; 
    overflow: hidden; 
    -moz-box-shadow: 0px 0px 20px #FFF; 
    -webkit-box-shadow: 0px 0px 20px #FFF; 
    box-shadow: 0px 0px 20px #FFF; 
    min-height: 100%; 
} 
.container { 
    width: 660px; 
    display: block; 
    position: relative; 
    float: left; 
    margin-left: 5px; 
    margin-top: 10px; 
    margin-bottom: 35px; 
    background-color:#093; 
    height:400px; 
} 
.dynamicDiv { 
    float: left; 
    position:relative; 
    display:block; 
    background-color: #FFF; 
    width: 325px; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    margin-left: 0px; 
} 
</style> 
</head> 

<body> 
<div class="container2"> 
    <div class="container"> 
     <div id="div1" class="dynamicDiv">1<br />2<br />3<br /></div> 
     <div id="div2" class="dynamicDiv">1<br />2<br /></div> 
     <div id="div3" class="dynamicDiv">1<br />2<br /></div> 
     <div id="div4" class="dynamicDiv">1<br />2<br />3<br /></div> 
    </div> 
</div> 
</body> 
</html>

출처

2014-04-08 willy

는 소리, isotope 체크 아웃 : 여기

문제 내가 경험하고의 예입니다.

출처

2014-04-08 00:48:05

감사합니다. 나는 그것을 잘 설명했던 http://designshack.net/articles/css/masonry/에서 좋은 정보를 발견했다. jquery 응용 프로그램에 의해 백업 된 CSS 구동 옵션을 사용할 것입니다. – willy

아무런 문제가 없습니다. 행운을 빈다. –

EDIT - 오ops, 내가 잘못 이해했을 수 있습니다! 아래 코드는 단순히 float div를 제공하지만 래퍼는 크고 짧은 "floating"을 허용하지 않습니다. 플러그인은 즉시 사용할 수있는 솔루션을 제공합니다.

제안 :

jQuery Masonry

또는 Josh Rutherford 같은 동위 원소 주목.

두 div마다 래퍼 div도 생성하십시오.

<div class="container2"> 
    <div class="container"> 
     <div class="wrapper" id="div_wrapper_1"> 
      <div id="div1" class="dynamicDiv"></div 
      <div id="div2" class="dynamicDiv"></div> 
     </div> 
     ... 
    </div>

벽돌 레이아웃으로 저를 가리키는위한

<style type="text/css"> 
    .dynamicDiv { 
    float: left; 
    } 
    .wrapper { 
    overflow: hidden; 
    } 
</style>

출처

2014-04-08 00:54:44

블록 div 위의 수직 공간을 채우는 방법?

답변

관련 문제