提问者:小点点

如何并排放置2个小部件? 最后的代码赞赏,因为我不是一个编码器


请看图片。 我在html文件中添加了小部件代码,但它总是一个比一个低! 我想添加更多的小部件太,所以请指导我相应。

提前谢谢!

代码-

<!-- Nifty50 TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
  {
  "interval": "5m",
  "width": 425,
  "isTransparent": false,
  "height": 450,
  "symbol": "NSE:NIFTY",
  "showIntervalTabs": true,
  "locale": "in",
  "colorTheme": "light"
}
  </script>
</div>
<!-- TradingView Widget END -->



<!-- BankNifty TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
  {
  "interval": "5m",
  "width": 425,
  "isTransparent": false,
  "height": 450,
  "symbol": "NSE:BANKNIFTY",
  "showIntervalTabs": true,
  "locale": "in",
  "colorTheme": "light"
}
  </script>
</div>
<!-- TradingView Widget END -->


共2个答案

匿名用户

我在您的小部件周围添加了一个包装器div,并为包装器提供了显示:flex;有关flexbox的更多信息,请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/

null

.wrapper {
  display: flex;
}
<div class="wrapper">

  <!-- Nifty50 TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
      {
        "interval": "5m",
        "width": 425,
        "isTransparent": false,
        "height": 450,
        "symbol": "NSE:NIFTY",
        "showIntervalTabs": true,
        "locale": "in",
        "colorTheme": "light"
      }
    </script>
  </div>
  <!-- TradingView Widget END -->



  <!-- BankNifty TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
      {
        "interval": "5m",
        "width": 425,
        "isTransparent": false,
        "height": 450,
        "symbol": "NSE:BANKNIFTY",
        "showIntervalTabs": true,
        "locale": "in",
        "colorTheme": "light"
      }
    </script>
  </div>
  <!-- TradingView Widget END -->
</div>

匿名用户

看看CSS Flexbox

尝试将两个小部件包装到Flexbox容器中,如下所示

styles.css

.widgets-wrapper{
  display: flex;
}

somepage.html

<div class="widgets-wrapper">

    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      ...
    </div>

    <div class="tradingview-widget-container">
        <div class="tradingview-widget-container__widget"></div>
        ...
    </div>

</div>

我假设它们都将占据50%的空间,但如果你需要将它们对齐,可以使用这个来居中:

.widgets-wrapper{
    display: flex;
    justify-content: center;
}

或者如果你想在它们之间留一些空间:

justify-content: space-between

或者,如果你还想在它们周围保留一些空间,以免它们到达左右两端:

justify-content: space-around

它有很多性质和可能性,所以我建议对它进行更深入的研究,抓住它所有的力量。

下面是一些更有用的链接:

  • FlexBox基本概念
  • CSS Flexbox(W3学校)
  • FlexBox完整指南