Question

我有6张图，我希望以2行3列显示它们。对于每一行，我将一个图左对齐，一个中心和一个右对齐。代码工作除了中心对齐的图形。我做错了什么？

我的代码如下请查看“全屏”片段以查看对齐方式。

<iframe width="432" height="258" align="left" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/219280/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Relative+Humidity+%28RH%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Relative+Humidity"></iframe>
<iframe width="432" height="258" style="text-align:center" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/219280/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Air+Temperature+%28AT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Air+Temperature"></iframe>
<iframe width="432" height="258" align="right" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/219280/charts/3?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=pH+Time+Series+Chart&type=line&xaxis=Time&yaxis=pH"></iframe>
<br>
<iframe width="432" height="258" align="left" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/219280/charts/4?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Light+Intensity+%28LI%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Light+Intensity"></iframe>
<iframe width="432" height="258" style="text-align:center" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/219280/charts/5?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Water+Temperature+%28WT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Water+Temperature+%28WT%29"></iframe>
<iframe width="432" height="258" align="right" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/219280/charts/6?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Electrical+Conductivity+%28EC%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Electrical+Conductivity+%28EC%29"></iframe>

Answer 1

配置三列的一种方法是左侧图float左侧，右图右侧，并使用auto margin将第三列居中。这需要更改HTML代码中图表的顺序，以便中心列在两个浮动列之后排在第三位。

对于内联元素（如iframes），无法计算“自动”边距值。所以我制作了图块元素。

有关此方法的更多参考，请参阅How to align 3 divs (left/center/right) inside another div?

iframe {
  width: 150px;
  height: 100px;
  border: 1px solid #cccccc;
  display: block;
}
.graph-left {
  float: left;
  border-color: red;
}
.graph-right {
  float: right;
  border-color: blue;
}
.graph-center {
  margin: 0 auto;
}

<iframe class="graph-left" src="https://thingspeak.com/channels/219280/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Relative+Humidity+%28RH%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Relative+Humidity"></iframe>
<iframe class="graph-right" src="https://thingspeak.com/channels/219280/charts/3?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=pH+Time+Series+Chart&type=line&xaxis=Time&yaxis=pH"></iframe>
<iframe class="graph-center" src="https://thingspeak.com/channels/219280/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Air+Temperature+%28AT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Air+Temperature"></iframe>
<br>
<iframe class="graph-left" src="https://thingspeak.com/channels/219280/charts/4?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Light+Intensity+%28LI%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Light+Intensity"></iframe>
<iframe class="graph-right" src="https://thingspeak.com/channels/219280/charts/6?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Electrical+Conductivity+%28EC%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Electrical+Conductivity+%28EC%29"></iframe>
<iframe class="graph-center" src="https://thingspeak.com/channels/219280/charts/5?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Water+Temperature+%28WT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Water+Temperature+%28WT%29"></iframe>

另一种方法是使用CSS multi-column layout。您可能需要查看此功能的browser compatibility。在本文发布时，prefixes are required可获得最大的浏览器兼容性。

iframe {
  width: 100%;
  height: 150px;
  border: 1px solid #cccccc;
  display: block;
}
.graph_row {
  
  margin: 0 0 1em;
  
  -webkit-column-count: 3;  /* Ch, Saf, And, BB  */
     -moz-column-count: 3;  /* Fx */
          column-count: 3;  /* IE 10, Op 11.1+ */
  
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
  
}

<div class="graph_row">
  <iframe class="graph" src="https://thingspeak.com/channels/219280/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Relative+Humidity+%28RH%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Relative+Humidity"></iframe>
  <iframe class="graph graph-right" src="https://thingspeak.com/channels/219280/charts/3?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=pH+Time+Series+Chart&type=line&xaxis=Time&yaxis=pH"></iframe>
  <iframe class="graph graph-center" src="https://thingspeak.com/channels/219280/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Air+Temperature+%28AT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Air+Temperature"></iframe>
</div>
<div class="graph_row">
  <iframe class="graph graph-left" src="https://thingspeak.com/channels/219280/charts/4?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Light+Intensity+%28LI%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Light+Intensity"></iframe>
  <iframe class="graph graph-right" src="https://thingspeak.com/channels/219280/charts/6?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Electrical+Conductivity+%28EC%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Electrical+Conductivity+%28EC%29"></iframe>
  <iframe class="graph graph-center" src="https://thingspeak.com/channels/219280/charts/5?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&title=Water+Temperature+%28WT%29+Time+Series+Chart&type=line&xaxis=Time&yaxis=Water+Temperature+%28WT%29"></iframe>
</div>

以一列iframe为中心

1 个答案: