javascript - 在图表后插入文本 block

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 将其子项设置为 row (彼此相邻)；会将每个子项显示为一行，全部充当一列。