在CSS表格佈局中的iframe

我想與一些文本並排放置一個youtube視頻。我的HTML是以下（http://jsfiddle.net/N5j7L/）：在CSS表格佈局中的iframe

<div style="width: 100%; display: table;"> 
    <div style="display: table-row"> 
     <div style="width: 600px; display: table-cell;"> 
      something</br> 
      something</br> 
      something</br> 
      something</br> 
      something</br> 
      something</br> 
     </div> 
     <div style="display: table-cell;"> 
      <iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
</div>

我不明白爲什麼第一列開始比第二低。我應該添加一些CSS？沒有iframe一切看起來不錯。

來源

2014-02-06 Piotr Stapp

嘗試此（附加的垂直對齊：用於左塔頂部）：

<div style="width: 100%; display: table;"> 
         <div style="display: table-row"> 
          <div style="width: 600px; display: table-cell; vertical-align:top;"> 
           something<br/> 
           something<br/> 
           something<br/> 
           something<br/> 
           something<br/> 
           something<br/> 
          </div> 
          <div style="display: table-cell;"> 
           <iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0"     frameborder="0" allowfullscreen></iframe> 
          </div> 
         </div> 
        </div>

來源

2014-02-06 13:05:18 unicorn80

您可以直接使用表格。如果不是限制，那麼下面的工作。

<table cellpadding="15"> 
    <tr> 
     <td> 
      <iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe><br/> 
      Video 1 
     </td> 

     <td> 
      <iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe> 
      <br/> 
      Video 2 
     </td> 
    </tr> 
</table>

請參閱更新的小提琴http://jsfiddle.net/N5j7L/4/

來源

2014-02-06 13:01:21 user12458

我會用簡單的流佈局做到這一點。將您的描述流向左側。然後設置一個餘量的IFRAME容器，寬度爲文本塊：

<div style="overflow: auto;"> 
    <div style="width: 100px; float: left;"> 
     <!-- text --> 
    </div> 
    <div style="margin-left: 100px;"> 
     <iframe ...></iframe> 
    </div> 
</div>

例如：http://jsfiddle.net/N5j7L/1/

來源

2014-02-06 13:01:32 aorcsik

在CSS表格佈局中的iframe

回答

相關問題