如何解决 div 对齐问题？答案

【问题标题】：How to fix div alignment issue?如何解决 div 对齐问题？
【发布时间】：2021-03-31 13:12:09
【问题描述】：

我正在开发一个网站，在该网站的底部您可以看到它拥有的三个社交媒体帐户，但是使用以下代码，这是输出，但我不知道是什么原因造成的。

如您所见，三个框上方有一个灰色框，我不知道如何解决。

.container {
  width: 600px;
  height: 190px;
  background-color: #ff7675;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

#st-box {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

#nd-box {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

#rd-box {
  float: right;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

<div class="container">
  <div id="st-box">
    <iframe></iframe>
  </div>

  <div id="nd-box">
    <iframe></iframe>
  </div>

  <div id="rd-box">
    <iframe></iframe>
  </div>

</div>

我能做什么？

【问题讨论】：

如果您检查元素，您可以清楚地看到这些是您的<iframes> 的三个边框。您没有删除边框，也没有为<iframes> 设置特定的大小，因此使用了相当大的带边框<iframe> 的默认样式。你可以，例如remove the border from these <iframe>s。期望的结果是什么？
@user4642212 我不太了解你。我应该为 iframe 设置大小吗？

标签： html css

【解决方案1】：

内部 div 中的 iframe 导致了这些看起来很奇怪的边框。您也可以使用 css 设置它们的样式。

例如，您可能想给他们：

border:0;
width:100%;

【讨论】：

另一个用户也早点发了这个，但也谢谢你。你知道我怎么能把标题放在盒子上面吗？
实际上，我的回答就像一分钟前一样 - 但没关系；）您可以在内部 div 中添加标题，就在 iframe 上方。

【解决方案2】：

您应该为您的 iframe 设置样式。这里有一些代码可以帮助你。

 iframe {
    display: block;
    width: 100%;
    border: 0;
  }

【讨论】：

谢谢！那一点 CSS 让奇怪的灰色框消失了！谢谢！

【解决方案3】：

浏览器为 iframe 添加默认边框。将边框：0 赋予 iframe。检查屏幕截图。

iframe { border: 0; }

【讨论】：

另一个用户也发送了这个，但也谢谢你。我发现自己遇到的另一个问题是，将内容放入 iframe 时，它显示得太小，但是如果我放大 iframe，分布就会变得混乱。你知道我该如何解决这个问题吗？
能否更新一下代码sn-p，让我看看调试一下。
哦，我找到了解决办法。我使用了图片超链接，但还是谢谢！