HTML Yardim

Merhaba, tradingview'un sagladigi widget'i bir html dosyasinda toplamak istiyorum fakat ekledigim widgetlar alt alta gidiyor, bunlari 3-4 sutun halinde nasil ekleyebilirim? Toplamda 20 tane widget ekleyecegim

Ornek kod bu sekilde,

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://uk.tradingview.com/symbols/BTCUSDT/?exchange=BINANCE" rel="noopener" target="_blank"><span class="blue-text">BTCUSDT Rates</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
  {
  "symbol": "BINANCE:BTCUSDT",
  "width": 350,
  "height": 220,
  "locale": "uk",
  "dateRange": "1D",
  "colorTheme": "light",
  "trendLineColor": "#37a6ef",
  "underLineColor": "#E3F2FD",
  "isTransparent": false,
  "autosize": false,
  "largeChartUrl": ""
}
  </script>
</div>
<!-- TradingView Widget END -->

Kodlari altalta yazdigimda elde ettigim goruntu

https://i.ibb.co/ZJr2MqH/goruntu.jpg

Photoshopta yapmis oldugum, istedigim goruntu

https://i.ibb.co/VQXXYNj/son.jpg

Nasil bir yol izleyerek istedigim goruntuye ulasabilirim?


Yardimlariniz icin tesekkurler.

https://www.w3schools.com/howto/howt...ur_columns.asp

Detaylı anlatıyor. Örnek kodu alıp Div classlarının içine widget kodunu koyarsan kolayca çözersin hocam.

Css Flex yapısını araştırın, Css bilginiz ne durumda bilmiyorum ama kapsayıcı div'e

display:flex;
flex-wrap:wrap;

verin. Tekrar eden divler'e de aynen şunu uygulayın :
örneğin

Class ismi repeat-div farz edersek:

.repeat-div{
flex:0 0 25%;
max-width:25%;
padding:15px;
}

uygulayın. İstediğiniz görünüme ulaşacaksınız. Yapamazsanız özelden irtibata geçebilirsiniz

Tryit Editor v3.6 (w3schools.com)

Yan yana sıralamak istediğiniz kodu kutu içerisindeki numaraların yerine entegre edebilirsiniz. Deneyerek sonuca ulaşacağınızı düşünüyorum.

Yardimlariniz icin tesekkurler.