align multiple headings above multiple iframes-CodePudding

I have six iframes in total and would like to add three headings above them.

html:

[..]
        <section id="stats">
            <iframe height="160" width="480" frameborder="0" src="Prod1"></iframe>
            <iframe height="160" width="480" frameborder="0" src="UAT1"></iframe>   
            <iframe height="160" width="480" frameborder="0" src="DEV1"></iframe>
            </br>
            <iframe height="340" width="480" frameborder="0" src="Prod2"></iframe>
            <iframe height="340" width="480" frameborder="0" src="UAT2"></iframe>
            <iframe height="340" width="480" frameborder="0" src="DEV2"></iframe>
        </section>
[..]

css:

* {padding:0;margin:0;}
 
html {width:100%;height:100%;}
body {margin:50px;font-family:Trebuchet, Verdana, Arial, Helvetica, Sans-serif;font-size:14px;text-decoration:none;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}


.container {margin:0 auto;} 

#a_logo {float:left;display: block;max-width:200px;max-height:100px;width:auto;height:auto;}
#b_logo {float:left;display: block;padding:0 0 0 600px;max-width:200px;max-height:100px;width:auto;height:auto;}
 
#content {float:left;font-size:20px;text-align:left;width:100%;margin:25px 50px 25px;padding:50px 0;background-image:url("../images/");background-position:left;background-repeat:no-repeat;}
#content h1 {clear:both;color:#000;padding:10px 0 10px;margin-top:50px;}
#content a {color:#6E6E6E;}
#content a:hover {color:#B18904;}
#content a:visited {color:#848484;}

#stats iframe {display: inline-block;}
 
footer {clear:both;text-align:left;color:#000;margin:0 50px;padding:10px 0 10px;}
footer p a {color:#6E6E6E;}
footer p a:hover {color:#B18904;}
footer p a:visited {color:#848484;}

The outcome should looks like:

header          header2        header3
iframe(prod1)   iframe(uat1)   iframe(dev1)
iframe(prod2)   iframe(uat2)   iframe(dev2)

I already tried several ways but it either breaks the vertical structure of the iframes or the headings are not in the right postition.

CodePudding user response：

Try this...

#stats {
  display: flex;
  justify-content: center;
}

#stats iframe {
  margin: 5px
}

<section id="stats">
  <div>
    <h2>header</h2>
    <iframe height="160" width="480" frameborder="0" src="https://www.w3schools.com"></iframe>
    <iframe height="160" width="480" frameborder="0" src="https://www.w3schools.com"></iframe>
  </div>
  <div>
    <h2>header2</h2>
    <iframe height="160" width="480" frameborder="0" src="https://www.w3schools.com"></iframe>
    <iframe height="160" width="480" frameborder="0" src="https://www.w3schools.com"></iframe>
  </div>
  <div>
    <h2>header3</h2>
    <iframe height="160" width="480" frameborder="0" src="https://www.w3schools.com"></iframe>
    <iframe height="160" width="480" frameborder="0" src="https://www.w3schools.com"></iframe>
  </div>
</section>

CodePudding user response：

The structure you want is a table -- so you can use:

<table> or display: table
<thead> or display: table-header-group
<tbody> or display: table-row-group
<tr> or display: table-row
<th>,<td> or display: table-cell

The example below uses the display CSS property

#stats {
  display: table;
  table-layout: fixed;
}

.head {
  display: table-header-group
}

.body {
  display: table-row-group
}

.row {
  display: table-row
}

h2,
.row div {
  display: table-cell
}

h2 {
  text-align: center;
}

iframe {
  border: 0
}

.r1 iframe {
  height: 160px;
  width: 480px;
}

.r2 iframe {
  height: 340px;
  width: 480px;
}

.A {
  outline: 3px dashed tomato;
}

.B {
  outline: 3px dashed lime;
}

.C {
  outline: 3px dashed cyan;
}

.D {
  outline: 3px dashed violet;
}

.E {
  outline: 3px dashed goldenrod;
}

.F {
  outline: 3px dashed navy;
}

<section id="stats">
  <header class='head'>
    <h2>Header1</h2>
    <h2>Header2</h2>
    <h2>Header3</h2>
  </header>
  <section class='body'>
    <div class='row r1'>
      <div>
        <iframe class='A' src="about:blank"></iframe>
      </div>
      <div>
        <iframe class='B' src="about:blank"></iframe>
      </div>
      <div>
        <iframe class='C' src="about:blank"></iframe>
      </div>
    </div>
    <div class='row r2'>
      <div>
        <iframe class='D' src="about:blank"></iframe>
      </div>
      <div>
        <iframe class='E' src="about:blank"></iframe>
      </div>
      <div>
        <iframe class='F' src="about:blank"></iframe>
      </div>
    </div>
  </section>
</section>