如何并排放置 2 个小部件？感谢最终代码，因为我不是编码员

Question

请看图片。我在 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 -->

Answer 1

我在您的小部件周围添加了一个包装器 div 并提供了该包装器 display: flex; 有关 flexbox

的更多信息，请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<style>
  .wrapper {
    display: flex;
  }
</style>

<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>

Answer 2

看看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% 并满足所有 space，但如果您需要对齐它们，请使用它来居中：

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

或者如果你想在它们之间有一些 space:

justify-content: space-between

或者，如果您还想保留一些 space 周围它们不会到达左端和右端：

justify-content: space-around

有很多属性和可能性，所以我建议更深入地研究它以抓住它的所有力量。

这里有一些更有用的link：

试试这个，让它与我提供的示例一起正常工作。

创建一个css文件并将其命名为styles.css

.widgets-wrapper{
  display: flex;
}

在您的 HTML 文件所在的同一文件夹中。然后，把它link传给你的HTML，在你的HTMLhead上使用link标签，所以最后的例子应该是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <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>
    
</body>
</html>

使用 <link rel="stylesheet" href="styles.css"> 你是在告诉你的 HTML 到 link CSS 所以你在 [=85= 上定义的规则] 将应用于您的 HTML。

这可以让您的代码更加简洁，强烈建议您这样做，而不是通过 HTML.

上的 <style> 标签应用样式。

styles.css 变体。

/****************/
/*  Base styles */
/*  Ignore this */
/****************/

body{
  font-family: Helvetica;
}
code{
  padding: 4px;
  background: #444;
  color: #fff;
}

.widgets-wrapper{
  margin-bottom: 20px;
  border: 1px solid black;
}
.widget{
  width: 100px;
  height: 100px;
}

.widget.blue{
  background: lightblue;
}
.widget.coral{
  background: lightcoral;
}
.widget.fifty{
  width: 50%;
}

/*****************/
/* Flex variants */
/*****************/

/* Just apply flexbox to align horizontally */
.widgets-wrapper.flex{
    display: flex;
}

/* Center align */
.widgets-wrapper.centered{
  display: flex;
  justify-content: center;
}

/* space-between to separate them */
.widgets-wrapper.space-between{
  display: flex;
  justify-content: space-between;
}

/* space-around to have blank space at both sides of the boxes */
.widgets-wrapper.space-around{
  display: flex;
  justify-content: space-around;
}

/* In case your widgets are 50% with each */
.widgets-wrapper.fifty-fifty{
  display: flex;
}

<p>Apply <code>display:flex</code> to align them horizontally</p>
<div class="widgets-wrapper flex">

    <div class="widget blue">
    </div>

    <div class="widget coral">
    </div>

</div>

<p>Apply <code>display: flex; justify-content: center;</code> to center them</p>
<div class="widgets-wrapper centered">

    <div class="widget blue">
    </div>

    <div class="widget coral">
    </div>

</div>

<p>Apply <code>display: flex; justify-content: space-between;</code> to add space between the boxes</p>
<div class="widgets-wrapper space-between">

    <div class="widget blue">
    </div>

    <div class="widget coral">
    </div>

</div>

<p>Apply <code>display: flex; justify-content: space-around;</code> to add space at both sides of the boxes</p>
<div class="widgets-wrapper space-around">

    <div class="widget blue">
    </div>

    <div class="widget coral">
    </div>

</div>

<p>In case your widgets are 50% width each, just applying <code>display: flex;</code> makes the trick</p>
<div class="widgets-wrapper fifty-fifty">

    <div class="widget blue fifty">
    </div>

    <div class="widget coral fifty">
    </div>

</div>

如何并排放置 2 个小部件？感谢最终代码，因为我不是编码员

How to place 2 widgets side by side? Final Code appreciated as I am not a coder

html

css

position