使用 iFrame 和 Img 居中 CSS 网格 div

Question

所以我想在我的网站上创建一个网格，顶部有 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>

Answer 1

最好的方法是使用 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>

就是这样

Answer 2

从 iframe 中删除 width/height 属性，使用 CSS 使其更加灵活，同时从您的图像中删除内联样式并使其响应。另外，使 .charts 灵活。在这种情况下，您可以对齐此单元格的内容。

有关详细信息，请参阅 CSS 代码片段部分注释。

将代码片段展开到整页，以查看示例

.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>

使用 iFrame 和 Img 居中 CSS 网格 div

Centering CSS grid divs with iFrame and Img

html

css

iframe