在图表后插入文本块

Question

我在页面上有几个图表，如何确保在中心的每个图表之后仍然有文本？

https://jsfiddle.net/0xkq98sv/1/

window.onload = function() {
            let container = document.querySelector('.chart-container');

        [{"name":"test","description":"test","date":[1577203210000,1577206808000,1577210408000],"profitInBTC":[0.0,-0.79,0.87],"profitInUSDT":[0.0,-0.51,0.36]},{"name":"puz","description":"puz","date":[1582665302212,1582668005727,1582671603990],"profitInBTC":[0.0,-0.5,14.72],"profitInUSDT":[15.4,15.41,15.41]}].forEach(function(snapshot) {

            let chartcont = document.createElement('div');
            chartcont.className = 'chart';
            let desc = document.createElement('div');
            desc.className = 'desc-container';
            desc.innerHTML = snapshot.description;

            container.append(desc);
            container.append(chartcont);


            var config = createConfig(snapshot);

            Highcharts.stockChart(chartcont, config);


        });

    };

Answer 1

.chart-container{
   flex-direction: column;
}

.desc-container {
    text-align: center;
    display: block;
}

根据您的jsfiddle flex-direction：row;将使用flex-direction：column将其子级排成一行（彼此相邻）；将每个子项显示为一行，全部作为一列。