在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

回答

相关问题