HTML - Cột bỏ qua chiều cao

Question

Ngay bây giờ tôi có điều này:

Nhưng tôi cần một cái gì đó như thế này:

HTML

<div id="content">  
     <div class="block" style="height:600px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 

     ... 
    </div> 

CSS

.block 
{ 
    width:350px; 
    background-color:white; 
    border-radius:5px; 
    margin-right:80px; 
    margin-bottom:80px; 
    display:inline-block; 
} 

#content 
{ 
    position:relative; 
    display:inline; 
    overflow:auto; 
} 

tôi đã cố gắng sử dụng cột nhưng điều đó không làm việc tốt, nó cho thấy một cột duy nhất mặc dù số lượng cột cao hơn 1.

Answer 1

Đây là giải pháp của tôi:

HTML:

<div class="grid-container"> 
    <div class="third"> 
    <div class="grid grid1"> 
     <p>Grid 1</p> 
    </div> 
    <div class="grid grid2"> 
     <p>Grid 2</p> 
    </div> 
    </div> 
    <div class="third"> 
    <div class="grid grid3"> 
     <p>Grid 3</p> 
    </div> 
    <div class="grid grid4"> 
     <p>Grid 4</p> 
    </div> 
    </div> 
    <div class="third"> 
    <div class="grid grid5"> 
     <p>Grid 5</p> 
    </div> 
    <div class="grid grid6"> 
     <p>Grid 6</p> 
    </div> 
    </div> 
</div> 

CSS:

.grid-container { 
    width: 100%; 
    text-align: center; 
    margin-top: 15px; 
} 

.third { 
    display: inline-table; 
    width: 30%; 
} 

.grid { 
    border: 1px solid black; 
    margin: 10px 0; 
} 

.grid1 { 
    height: 200px; 
} 

.grid2 { 
    height: 100px; 
} 

.grid3 { 
    height: 100px; 
} 

.grid4 { 
    height: 350px; 
} 

.grid5 { 
    height: 200px; 
} 

.grid6 { 
    height: 200px; 
} 

Bây giờ tôi đã sử dụng rất nhiều các lớp css ở đây (grid1, grid2 ...), chúng thường không được sử dụng, chỉ cần đặt chiều cao: auto để có chiều cao cần thiết để hiển thị tất cả nội dung.

dụ làm việc có thể được tìm thấy ở đây: http://cssdeck.com/labs/full/nuauntmo

Answer 2

Tùy thuộc vào những gì bạn đang cố gắng để đạt được, bạn có thể đặt các khối xếp chồng lên nhau theo chiều dọc trong các thùng chứa riêng biệt. Một cái gì đó như thế này:

HTML:

<div id="content"> 
    <div class="col"> 
     <div class="block" style="height:600px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 
    </div> 
    <div class="col"> 
     <div class="block" style="height:500px;"> 

     </div> 

     <div class="block" style="height:500px;"> 

     </div> 
    </div> 
... 

CSS:

.col { 
    display: inline-block; 
    margin-right:80px; 
    vertical-align: top; 
} 
.block { 
    width:350px; 
    background-color:#ccc; 
    border-radius:5px; 
    margin-bottom:80px; 
    display:block; 
    vertical-align: top; 
} 

#content { 
    position:relative; 
    display:inline; 
    overflow:auto; 
} 

Các cột sẽ quấn nếu không có đủ không gian ngang mặc dù, vì vậy container sẽ phải có chiều rộng cố định.

Answer 3

thử thêm thuộc tính căn chỉnh dọc trong css.

.block 
{ 
    width:350px; 
    background-color:grey; 
    border-radius:5px; 
    margin-right:80px; 
    margin-bottom:80px; 
    display:inline-block; 
    vertical-align: top; 

}