Question

接下来，所有文件都位于：

idf@:/var/www/mywebsite.com/html$ ls -la
total 20
drwxr-xr-x 2 idf  idf  4096 Mar 10 16:38 .
drwxr-xr-x 3 root root 4096 Mar  1 11:06 ..
-rw-rw-r-- 1 idf  idf   922 Mar 10 15:30 icons8-gamma-48.png
-rw-rw-r-- 1 idf  idf  1843 Mar 10 16:21 index.html
-rw-rw-r-- 1 idf  idf   141 Mar 10 15:59 style.css

我有这样的代码：

style.css

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

然后在我的index.html中，我想使用frame文件将widget和style.css分成左中间的列，如here所述。但这无效。页面显示正常，但布局不是纵栏式。

什么是使用.css并排排列的正确html？

index.html    

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <title>Welcome to mywebsite.com!</title>
        <link rel="icon"
          type="image/png"
          href="/icons8-gamma-48.png" />
    </head>
 <div class="column side">
   <iframe src="https://sslecal2.forexprostools.com?columns=exc_flags,exc_currency,exc_importance,exc_actual,exc_forecast,exc_previous&features=datepicker,timezone&countries=25,32,6,37,72,22,17,39,14,10,35,43,56,36,110,11,26,12,4,5&calType=week&timeZone=8&lang=1" width="650" height="100%" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0"></iframe><div class="poweredBy" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: 11px;color: #333333;text-decoration: none;">Real Time Economic Calendar provided by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a>.</span></div>
</div>
<div class="column middle">
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_c1ac3"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  ...

Answer 1

我认为您遇到的问题与iframe内容有关。设置为width="650"，比侧栏所允许的25％（在大多数屏幕尺寸上）大。如果将iframe的宽度更改为100％，它将适合您所需的尺寸，但不会显示整个iframe内容。您可能需要试一下iframe的宽度才能获得所需的外观。

您还需要将列放在div行中，这样才能正确处理列。

CSS

**.column {
  float: left;
}
/* Left and right column */
.column.side {
  width: 25%;
}
/* Middle column */
.column.middle {
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  clear: both;
}**

HTML

<div class="row">
  <div class="column side">
    This is text in left column.
  </div>
  <div class="column middle">
    This is text in middle column.
  </div>
  <div class="column side">
    This is text in right column.
  </div>
</div>

列布局的样式CSS

1 个答案: