如何使用CSS對齊文本和圖表

我試圖將我的文本放在一行中，然后將所有圖表放在一個新行中。我試過使用 <!br> 但這沒有用，我也試過在 CSS 中使用 display:block 。我在下面附上了圖片。如果嵌入了兩個圖表但沒有嵌入三個圖表，則格式只會看起來像我想要的樣子。

如何解決這個問題

我希望它看起來像這樣

我真的可以使用一些幫助。我需要它的大學。謝謝！:)

HTML

<container class="bcontainer">
    <p>This first chart tracks Covid-19 cases by UK region. My second chart looks at productivity in the UK. This chart on gun deaths in the US is pulled from the Rapid Charts example library.</p>

    <div class="chart" id="chart1">
        <script>
            var myChart1 = "chart1_covidUKRegions.json";
            vegaEmbed('#chart1', myChart1);
        </script>
    </div>

    <div class="chart" id="chart2">
        <script>
            var myChart2 = "chart2_ukProductivity.json";
            vegaEmbed('#chart2', myChart2);
        </script>
    </div>

    <div class="chart" id="chart3">
        <script>
            var myChart3 = "chart3_gundeathUS.json";
            vegaEmbed('#chart3', myChart3);
        </script>
    </div>
</container>

CSS

p{
    color:rgb(203, 221, 224);
    font-family: 'Roboto', sans-serif;
    line-height: 1; 
    text-align: justify;
    text-align-last: center;
    display: block;
    max-width: 960px;
}

.bcontainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 25px 25px;
  margin-top: 25px;
  border-style: solid;
  border-color: rgb(219, 188, 188);
  padding: 25px;
  border-radius: 35px;
  
}

/* Chart Format */
.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.chart {
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    display: inline-block;

}

uj5u.com熱心網友回復：

只需將所有圖表放在另一個 div 中。

<div>
  <div class="chart" id="chart1">
    <script>
        var myChart1 = "chart1_covidUKRegions.json";
        vegaEmbed('#chart1', myChart1);
    </script>
  </div>
  <div class="chart" id="chart2">
    <script>
        var myChart2 = "chart2_ukProductivity.json";
        vegaEmbed('#chart2', myChart2);
    </script>
  </div>
  <div class="chart" id="chart3">
    <script>
        var myChart3 = "chart3_gundeathUS.json";
        vegaEmbed('#chart3', myChart3);
    </script>
  </div>
</div>

uj5u.com熱心網友回復：

.bcontainer 類display: flex將覆寫p標簽上的顯示。對于您的問題，我建議您編輯該flex-flow屬性：

.bcontainer {
  flex-flow: column;
  align-items:center; // to center elements horizontally if you want
  ...
  ...
}

這將使元素占據整行，然后您必須將圖表元素包裝在圖表容器中并flex-direction: column;從.chart-container屬性中洗掉（flex-direction 的默認值是行）。

.chart-container {
 display: flex;
 flex-direction: column; **<-- remove this line**
 align-items: center;
 padding-top: 70px;
 padding-bottom: 70px;
}

p 標簽之后的容器標簽內的 html 將如下所示：

  <div class="chart-container">
    <div class="chart" id="chart1">
      <script>
        var myChart1 = 'chart1_covidUKRegions.json';
        vegaEmbed('#chart1', myChart1);
      </script>
    </div>
    <div class="chart" id="chart2">
      <script>
        var myChart2 = 'chart2_ukProductivity.json';
        vegaEmbed('#chart2', myChart2);
      </script>
    </div>
    <div class="chart" id="chart3">
      <script>
        var myChart3 = 'chart3_gundeathUS.json';
        vegaEmbed('#chart3', myChart3);
      </script>
    </div>
  </div>

標籤：html css

上一篇：回應式圖片，scrset為螢屏寬度的25%，選擇大圖

下一篇：為什么資料改變角度時元素之間的間距不同