iframeの1つの列を中心に

Question

私は6つのグラフを持っており、2行3列に表示したいと考えています。各行について、グラフを左に1つ、中央に1つ、右に1つ並べた。中央揃えのグラフを除いて、コードは機能しました。私は間違って何をしていますか？

私のコードは以下の通りです。
スニペットを表示して「全画面表示」を確認してください。 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を使用して第3列をセンタリングすることです。これには、HTMLコード内のグラフの順序を変更して、中央の列が2つの浮動列の後に来るようにする必要があります。

インライン要素（iframesなど）の場合、「自動」マージン値は計算できません。そこでグラフを要素にブロックしました。この方法の詳細について参照

、別の方法は、CSS multi-column layoutを使用することである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>

参照。この機能の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>