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

您可以尝试使用响应式解决方案：

＆＃13;

* {box-sizing: border-box}
body {margin: 0}

#container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

.items {
  column-count: 3;
  column-gap: 10px;
}

.item {
  margin-bottom: 10px;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

img {
  display: block;
  max-width: 100%;
}

@media (max-width: 1220px) {
  .items {padding: 0 10px}
}

@media (max-width: 990px) {
  .items {column-count: 2}
}

@media (max-width: 500px) {
  .items {column-count: 1}
}

＆＃13;

<div id="container">
  <section class="items">
    <div class="item">
      <img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="">
    </div>
    <div class="item">
      <img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="">
    </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="">
    </div>
    <div class="item">
      <img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="">
    </div>
    <div class="item">
      <img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="">
    </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="">
    </div>
    <div class="item">
      <img src="http://colonialbrickandstone.com/colonialwp/media/manitoulin-island-view-800x650.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://all-that-is-interesting.com/wordpress/wp-content/uploads/2013/08/secret-gardens-kirstenbosch-2.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://www.thinkslovenia.com/upload/area_guides/south_top_10/kolpa.jpg" alt="">
    </div>
    <div class="item">
      <img src="https://www.viaventure.com/wp-content/uploads/450x300-Lamanai03.jpg" alt="">
    </div>
    <div class="item">
      <img src="https://www.fredericanaturereserve.com/wp-content/uploads/2016/08/500x350-px-F1-10.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://www.nowphuket.com/wp-content/uploads/2014/09/layan-beach-550x400.jpg" alt="">
    </div>
    <div class="item">
      <img src="https://www.globotreks.com/wp-content/uploads/2017/06/Redding-Nature-600x450.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://liveinlosgatosblog.com/wp-content/uploads/2015/08/Shannon-Valley-Ranch-open-space-trail-650x500.jpg" alt="">
    </div>
    <div class="item">
      <img src="http://www.9corerealty.com/wp-content/uploads/2016/03/Collier-County-4-700x550.jpg" alt="">
    </div>
  </section>
</div>

＆＃13;

创建具有不同高度的不同div的布局HTML

2 个答案: