iframe в таблице таблиц CSS

Question

Я пытаюсь иметь видео с youtube рядом с некоторым текстом. Мой HTML выглядит следующим образом (http://jsfiddle.net/N5j7L/):

<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 все выглядит хорошо.

Answer 1

Тест (добавлено вертикального выравнивания: сверху на левую колонку):

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

Answer 2

Вы можете напрямую использовать таблицу. Если это не ограничение, то работает следующее.

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

Answer 3

Я хотел бы сделать это с простым макетом потока. Поток вашего описания влево. затем установить запас для контейнера 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/