如何在HTML上并排放置4組兩個圖表？

我是 HTML 的新手。我目前正在嘗試在網頁上并排放置 4 組兩個圖表。所以每組都會有一個上下圖。我的代碼如下：

<template>
<div class = "container">
  <div class="col-xl-3 col-lg-12">
    <div class ="row">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref="prpsch1" id="prpsch1" class="height-300">
                </div>
              </div>
            </div>
            </div>
      </div>
    <div class ="row">
          <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref = "prpdch1" id="prpdch1" class="height-300">
                </div>
              </div>
            </div>
          </div>
    </div>>
        </div>
  <div class="col-xl-3 col-lg-12">
    <div class ="row">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref="prpsch2" id="prpsch2" class="height-300">
                </div>
              </div>
            </div>
            </div>
      </div>
    <div class ="row">
          <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref = "prpdch2" id="prpdch2" class="height-300">
                </div>
              </div>
            </div>
          </div>
    </div>>
        </div>
  <div class="col-xl-3 col-lg-12">
    <div class ="row">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref="prpsch3" id="prpsch3" class="height-300">
                </div>
              </div>
            </div>
            </div>
      </div>
    <div class ="row">
          <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref = "prpdch3" id="prpdch3" class="height-300">
                </div>
              </div>
            </div>
          </div>
    </div>>
        </div>
  <div class="col-xl-3 col-lg-12">
    <div class ="row">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref="prpsch4" id="prpsch4" class="height-300">
                </div>
              </div>
            </div>
            </div>
      </div>
    <div class ="row">
          <div class="card">
              <div class="card-header">
                <h4 class="card-title">Graph</h4>
                <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
              </div>
              <div class="card-content">
                <div class="card-body">
                <div ref = "prpdch4" id="prpdch4" class="height-300">
                </div>
              </div>
            </div>
          </div>
    </div>>
        </div>
</div>
</template>

但是，網頁只是從上到下的每個圖表。這些圖表甚至都不完整。

我想在頁面的空白部分將 8 個圖表分成 2 行 4 列。

我該怎么做？

提前非常感謝！

uj5u.com熱心網友回復：

使用彈性盒：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.graph {
  background: linear-gradient(30deg, #ccc5, #ccc, #ccc5);
  flex-basis: calc(25% - 5px);
}

<div class="wrapper">
  <div class="graph">Graph 1</div>
  <div class="graph">Graph 2</div>
  <div class="graph">Graph 3</div>
  <div class="graph">Graph 4</div>
  <div class="graph">Graph 5</div>
  <div class="graph">Graph 6</div>
  <div class="graph">Graph 7</div>
  <div class="graph">Graph 8</div>
</div>

您在 中定義圖形的大小flex-basis。如果你使用 gap （比如我的例子，你需要從中減去它）。

使用網格：（
如果您事先知道內容的結構，則更有用）

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 500px));
  grid-gap: 5px;
}

.graph {
  background: linear-gradient(30deg, #ccc5, #ccc, #ccc5);
}

<div class="wrapper">
  <div class="graph">Graph 1</div>
  <div class="graph">Graph 2</div>
  <div class="graph">Graph 3</div>
  <div class="graph">Graph 4</div>
  <div class="graph">Graph 5</div>
  <div class="graph">Graph 6</div>
  <div class="graph">Graph 7</div>
  <div class="graph">Graph 8</div>
</div>

魔術發生在grid-template-columns: repeat(auto-fit, minmax(250px, 500px));. 這使您的圖表具有回應性。當圖形元素顯示在大螢屏上時，它會給它們 500px。當您在小螢屏中查看它們并且元素變小時，它們將開始在彼此下方自動填充。

uj5u.com熱心網友回復：

<template>
    <div class = "container">
      <div class="row">
        <div class ="col-xl-3 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref="prpsch1" id="prpsch1" class="height-300">
                    </div>
                  </div>
                </div>
                </div>
          </div>
        <div class ="col-xl-3 col-lg-6">
              <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref = "prpdch1" id="prpdch1" class="height-300">
                    </div>
                  </div>
                </div>
              </div>
        </div>>
            </div>
      <div class="row">
        <div class ="col-xl-3 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref="prpsch2" id="prpsch2" class="height-300">
                    </div>
                  </div>
                </div>
                </div>
          </div>
        <div class ="col-xl-3 col-lg-6">
              <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref = "prpdch2" id="prpdch2" class="height-300">
                    </div>
                  </div>
                </div>
              </div>
        </div>>
            </div>
      <div class="row">
        <div class ="col-xl-3 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref="prpsch3" id="prpsch3" class="height-300">
                    </div>
                  </div>
                </div>
                </div>
          </div>
        <div class ="col-xl-3 col-lg-6">
              <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref = "prpdch3" id="prpdch3" class="height-300">
                    </div>
                  </div>
                </div>
              </div>
        </div>>
            </div>
      <div class="row">
        <div class ="col-xl-3 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref="prpsch4" id="prpsch4" class="height-300">
                    </div>
                  </div>
                </div>
                </div>
          </div>
        <div class ="col-xl-3 col-lg-6">
              <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Graph</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>                
                  </div>
                  <div class="card-content">
                    <div class="card-body">
                    <div ref = "prpdch4" id="prpdch4" class="height-300">
                    </div>
                  </div>
                </div>
              </div>
        </div>>
            </div>
    </div>
    </template>

試試這個它肯定會有所幫助..

標籤：

上一篇：如何在Bootstrap頁腳中垂直居中文本？

下一篇：CSS背景圖片回應式覆寫底部