时间戳

首页 > 解决方案 > iframe代码在不知不觉中隐藏后的Div - 三列布局页面

html - iframe代码在不知不觉中隐藏后的Div - 三列布局页面

问题描述

 {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
<div class="row">
  <div class="column" style="background-color:#aaa;">
    // 1st column Content Here
  </div>
  
  
  <div class="column" style="background-color:#bbb;">
 //2nd column Content
 <iframe src="file.php" scrolling="no" style="height: 50px;width:100%; border:none; ></iframe>

  </div>
  
  
  <div class="column" style="background-color:#ccc;">
    // 3rd column Content Here
  </div>
</div>

如果我删除 iframe，第三列出现在右侧，但如果我添加它则不会出现。请帮我解决这个问题。谢谢

标签： htmlcss

解决方案

您错过了 iframestyle标记后的右双引号。添加这个，它会工作:)

前：

<iframe src="file.php" scrolling="no" style="height: 50px;width:100%; border:none; ></iframe>

后：

<iframe src="file.php" scrolling="no" style="height: 50px;width:100%; border:none;"></iframe>

注意语法突出显示的颜色差异。如果您的开发环境不支持这一点（或者您没有注意到），那么值得花一点时间来获得一个支持或习惯它。

推荐阅读