異なる高さの別のdivでレイアウトHTMLを作成

Question

異なる高さのdivでレイアウトを作成したいと思います。

例の画像：

私はdivのコンテンツに基づいて高さを変更することができさえすることをしたいと思います。

私のコードでは、私はそれを変更したいので、私はどのように分からないのdivの固定された高さを置く。

これは私のコードです：このような

HTML

<div> 
    <div class="g-block-1"> 
     <div class="block1"></div> <div class="block2"></div> 
    </div> 
    <div class="g-block-2"> 
     <div class="block3"></div> 
     <div class="block4"></div> 
     <div class="block5"></div> 
    </div> 
</div> 

CSS

.block1 { 
    width: 100%; 
    height: 500px; 
    background-color: red; 
} 

.block2 { 
    width: 100%; 
    height: 350px; 
    background-color: yellow; 
} 

.block3 { 
    width: 100%; 
    height: 100px; 
    background-color: blue; 
} 

.block4{ 
    width: 100%; 
    height: 350px; 
    color: black; 
} 

.block5 { 
    width: 100%; 
    height: 400px; 
    color: pink; 
} 

.g-block-1 { 
    width: 50%; 
    float: left; 
} 

.g-block-2 { 
    width: 50%; 
    float: right; 
} 

Answer 1

何か？ https://jsfiddle.net/scorpio777/wwwLmvfu/

<style> 
pre {margin:0 padding:0;} 
.block1 { 
    width: 100%; 
    height: 100%; 
    border:1px solid; 
    border-color:red; 
    margin:0; 
    padding:0; 
} 

.block2 { 
    width: 100%; 
    height: 100%; 
    border:1px solid; 
    border-color:orange; 
    margin:0; 
    padding:0; 
} 

.block3 { 
    width: 100%; 
    height: 100%; 
    border:1px solid; 
    border-color:blue; 
    margin:0; 
    padding:0; 
} 

.block4{ 
    width: 100%; 
    height: 100%; 
    border:1px solid; 
    border-color:green; 
    margin:0; 
    padding:0; 
} 

.block5 { 
    width: 100%; 
    height: 100%; 
    border:1px solid; 
    border-color:pink; 
    margin:0; 
    padding:0; 
} 

.g-block-1 { 
    width: 50%; 
    height:100%; 
    float: left; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 

.g-block-2 { 
    width: 50%; 
    float: right; 
    height:100%; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 
} 
</style> 
<div> 
    <div class="g-block-1"> 
     <div class="block1"> 
      <pre> 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
      </pre> 
     </div> 
     <div class="block2"> 
      <pre> 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
       some content 
      </pre> 
     </div> 
    </div> 
    <div class="g-block-2"> 
     <div class="block3"> 
      <pre> 
       some content 
       some content 
       some content 
       some content 
       some content 
      </pre> 
     </div> 
     <div class="block4"> 
      <pre> 
       some content 
       some content 
       some content 
       some content 
       some content 
      </pre> 
     </div> 
     <div class="block5"> 
      <pre> 
       some content 
       some content 
       some content 
       some content 
       some content 
      </pre> 
     </div> 
    </div> 
</div> 

Answer 2

あなたはこのような何かを行うことができます。

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
#container { 
 
    width: 1200px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
#container > .items { 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    column-count: 3; 
 
    column-gap: 10px; 
 
} 
 

 
#container > .items .item { 
 
    margin-bottom: 10px; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
} 
 

 
#container > .items > .item img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
} 
 

 
@media screen and (max-width: 1220px) { 
 
    #container > .items { 
 
    padding: 0 10px; 
 
    } 
 
} 
 
@media screen and (max-width: 990px) { 
 
    #container > .items { 
 
    column-count: 2; 
 
    } 
 
} 
 
@media screen and (max-width: 500px) { 
 
\t #container > .items { 
 
\t column-count: 1; 
 
    } 
 
}

<div id="container"> 
 
    <section class="items"> 
 
    <div class="item"> 
 
     <img src="https://www.fredericanaturereserve.com/wp-content/uploads/2016/08/500x350-px-F1-10.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://webbox.imgix.net/images/aisrvqxbdirtzdby/c141a47e-bdd2-4687-a795-61141548c195.jpg?auto=enhance,compress&fit=crop&w=750&h=600" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://webbox.imgix.net/images/aisrvqxbdirtzdby/c141a47e-bdd2-4687-a795-61141548c195.jpg?auto=enhance,compress&fit=crop&w=750&h=600" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.fredericanaturereserve.com/wp-content/uploads/2016/08/500x350-px-F1-10.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="Image description"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="Image description"> 
 
    </div> 
 
    </section> 
 
</div>

完全応答ソリューションを。