iframe의 한 열을 중심으로

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>