центрирование одного столбца iframes

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) значение «auto» не может быть рассчитано. Поэтому я сделал элементы блока графа.

Для получения дополнительной ссылки на этом методе см 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>