如何在网格中显示 Facebook 链接？

问题描述

我需要有关此 <iframe> 的帮助，我无法插入到网格布局中。我可以将 <iframe> 插入网站的每个部分，除了这个网格布局。

感谢您的帮助。

.lluncamp2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}

.lluncamp2 img {
  object-fit: cover;
  width: 100%;
  max-height: 200px;
}

<div class="lluncamp2">

  <div>
    <ul>Laundry room-
      <li>Coin operated Washing machine</li>
      <li>Tumble dryer</li>
      <li>FREE Fridge/ Freezer</li>
      <li>Shaving and electricity points</li>
    </ul>
  </div>
  <div>
    <iframe src="https://www.facebook.com/plugins/video.PHP?height=314&href=https%3A%2
      F%2Fwww.facebook.com%2Fkosmic.suture%2Fvideos%2F1936825236449065%2F&show_text=false&width=560" max-width="560" max-height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write;
      encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe></div>
  <div>Ample field space to enjoy and play</div>
  <div>Chemical disposal point</div>
  <div>FREE hot water in both the showers and dishwashing room</div>
  <div>Coin operated launderette</div>
</div>

解决方法

如果这是您的实际 HTML，那么问题在于 iframe 标记的 src 属性上的换行符。如果我将您的 iframe 更改为：

.lluncamp2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}

.lluncamp2 img {
  object-fit: cover;
  width: 100%;
  max-height: 200px;
}

<div class="lluncamp2">

  <div>
    <ul>Laundry room-
      <li>Coin operated Washing machine</li>
      <li>Tumble dryer</li>
      <li>FREE Fridge/ Freezer</li>
      <li>Shaving and electricity points</li>
    </ul>
  </div>
  <div>
    <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fkosmic.suture%2Fvideos%2F1936825236449065%2F&show_text=false&width=560" max-width="560" max-height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write;
      encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe></div>
  <div>Ample field space to enjoy and play</div>
  <div>Chemical disposal point</div>
  <div>FREE hot water in both the showers and dishwashing room</div>
  <div>Coin operated launderette</div>
</div>