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

Question

我需要这个<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>

​

Answer 1

如果这是实际的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>

​