在多個iframe上方對齊多個標題

我總共有六個 iframe，想在它們上面添加三個標題。

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;}

結果應該如下所示：

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

我已經嘗試了幾種方法，但它要么破壞了 iframe 的垂直結構，要么標題不在正確的位置。

uj5u.com熱心網友回復：

試試這個...

#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>

uj5u.com熱心網友回復：

你想要的結構是一個表——所以你可以使用：

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

下面的例子使用了displayCSS 屬性

#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>

標籤：html css 内嵌框架

上一篇：無法使影像適合影像庫中的父div大小

下一篇：重用Javascript函式？