display: ячейки таблицы теряют вертикальное выравнивание без начальных символов в первом div - PullRequest
Новая
       45

display: ячейки таблицы теряют вертикальное выравнивание без начальных символов в первом div

1 голос
/ 01 мая 2020

Этот сводит меня с ума. Почему теряется верхнее выравнивание элементов таблицы, если я уберу слово «почему»? Разве я не могу вложить div в div таблицы-ячейки?

Помимо этого эффекта, я хочу получить результат: три столбца, внешние столбцы фиксированной ширины, переменная среднего столбца. Каждый должен содержать несколько div с текстом и изображениями.

Адрес скрипта: jsfiddle.net / muuroo / Lezons87 / 2

html: 

   <div class="vtable">
     <div class="vrow">

       <div class="vcell1">
         <div>
           why
           <div style="height: 200px;background:orange;">
           </div>
         </div>
       </div><!-- vcell1 -->

       <div class="vcell2">
         <div>
       text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
         </div>
       </div><!-- vcell2 -->

       <div class="vcell3">
         <div>
          text<br>text<br>text<br>text<br>text<br>text<br>text</div>
         </div>
       </div><!-- vcell3-->

     </div><!-- vrow -->
   </div><!-- vtable -->

css: 

div{outline: 1px solid cyan;text-align: center;}

.vtable{
  display: table;
  width: 100%;
}
.vrow{
  display: table-row;
}
.vcell1{
  display: table-cell;
  width: 200px;
}
.vcell2{
  display: table-cell;
  width: auto;
}
.vcell3{
  display: table-cell;
  width: 200px;
}
...