使用 iFrame 和 Img 居中 CSS 网格 div答案

【问题标题】：Centering CSS grid divs with iFrame and Img使用 iFrame 和 Img 居中 CSS 网格 div
【发布时间】：2022-02-14 20:06:06
【问题描述】：

所以我想在我的网站上创建一个网格，顶部有 2 个 i 框架，下面有 2 个 img，例如

X X
X X

我设法让一些代码工作，但它看起来不太正确，现在网格卡在页面的左侧，在移动视图中它只是离开屏幕而不是适合移动版本，另一个问题是每列之间存在随机间隙。例如下面。

iframe {
  border: 1px solid;
}

.plotly-charts {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
}

<div class="plotly-charts">
  <div class="charts">
    <iframe width="600px" height="500px" frameborder="0" scrolling="no" src="someframe"></iframe>
  </div>
  <div class="charts">
    <iframe width="600px" height="500px" frameborder="0" scrolling="no" src="someframe"></iframe>
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/300x300/525eff/ffffff" alt="Word Cloud Positive" style="width:300px; height:300px;">
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/300x300/525eff/ffffff" alt="Word Cloud Negative-Neutral" style="width:300px; height:300px;">
  </div>
</div>

【问题讨论】：

标签： html css iframe

【解决方案1】：

从 iframe 中删除宽度/高度属性，使用 CSS 使其灵活，还从图像中删除内联样式并使其具有响应性。另外，使 .charts 具有弹性。在这种情况下，您可以对齐此单元格的内容。

查看 CSS 代码 sn-p 部分 cmets 了解更多详情。

将代码 sn-p 扩展到整页，以查看示例

.plotly-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* add grid gaps (gaps between rows and columns) */
  column-gap: 1rem;
  row-gap: 1rem;
}

/* make cell flex */
.charts {
  display: flex;
  justify-content: center;
}

.charts iframe {
  width: 100%;
  /* you can add ratios to your iframe in other way */
  aspect-ratio: 6/5;
}

/* add styles to you images, make it responsive */
.charts img {
  height: auto;
  width: 100%;
}

/* added for example purposes */
.charts iframe, .charts img {
  max-width: 600px;
}

<div class="plotly-charts">
  <div class="charts">
    <iframe frameborder="0" scrolling="no" src="//plotly.com/~mathewsjoyy/3.embed?logo=false&link=false&autosize=true"></iframe>
  </div>
  <div class="charts">
    <iframe frameborder="0" scrolling="no" src="//plotly.com/~mathewsjoyy/1.embed?logo=false&link=false&autosize=true"></iframe>
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Word Cloud Positive">
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Word Cloud Negative-Neutral">
  </div>
</div>

【讨论】：

【解决方案2】：

最好的方法是使用 Bootstrap.. 或者您应该使用包括一些 Javascript 在内的媒体查询... Bootstrap 很简单

<!--Import bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!--Add classes to your elements-->
<!--No need of grids instead use div classes-->

<div class="text-center d-flex col-md-4">
<h1>hello world</h1>
</div>

<!--Bootstrap script-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

就是这样

【讨论】：

没有理由添加完整的库来调整一个块。