HTML列は、私はこれを持っている今の高さ

Question

を無視

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; 
} 

私が列を使用してみましたが、それはうまく動作しませんでした、それは列数はここよりも高い1

Answer 1

が私の解決策があるにも関わらず1つの列のみを示した：

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; 
} 

ここでは、多くのCSSクラス（grid1、grid2 ...）を使用していますが、通常は使用する必要はありません。高さ：autoを設定すると、すべてのコンテンツを表示するのに必要な高さになります。

の作業例をここで見つけることができます： http://cssdeck.com/labs/full/nuauntmo

Answer 2

はあなたが達成しようとしている内容に応じて、あなたは別々の容器に垂直に積み重ねられたブロックを置くことができます。このような何か：

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; 
} 

列は、折り返されます。

Answer 3

cssにvertical-alignプロパティを追加してみてください。

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

}