CSS дисплей: таблица - PullRequest
Новая
       7

CSS дисплей: таблица

1 голос
/ 01 марта 2012

Я проверяю свойство CSS display:table на некоторых элементах div, но у меня проблемы. Ниже приведен фрагмент кода для моего теста: 

<div id="table">
<div class="table-row">
    <div class="table-cell">
    <img src="" width="70px" height="70px" />
    </div>
    <div class="table-cell">
    <h1>TEST</h1>
    </div>
</div>

<div class="table-row">
    <div class="table-cell">
    <form>
    <input type="text"></input>

    </div>
    <div class="table-cell">
    <input type="submit" value="Submit"></input>
    </div>
    </form>
</div>

со следующим CSS: 

#table{
display:table;
}
.table-row{
display:table-row;
}
.table-cell{
display:table-cell;
}

Желаемый результат можно увидеть на изображении ниже:

enter image description here

Ответы [ 3 ]

4 голосов
/ 01 марта 2012

  • Ваш желаемый результат не похож на обычный макет таблицы. Ширина столбцов в первом ряду не совпадает с шириной столбцов во втором ряду.

  • Вы пытаетесь открыть тег формы внутри одного элемента и закрыть его в другом.

Замена разметки реальной таблицей не даст желаемого результата, а display:table не работает по-другому.

http://jsfiddle.net/veYTv/1/

3 голосов
/ 01 марта 2012

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

Что-то такое же простое, как http://jsfiddle.net/veYTv/2/, позволяет получить желаемый вид (примечание: я тщательно проверил этот кросс-браузер, возможно, потребуетсянезначительные настройки CSS) 

<h1><img src="" width="70px" height="70px" />TEST</h1>
<input type="text"></input>
<input type="submit" value="Submit"></input>
0 голосов
/ 09 сентября 2013

Работа!вложенные таблицы:

CSS 

#table{ display:table;}
.table-row{ display:table-row;}
.table-cell{ display:table-cell;}
.table-row_1{ display:table;}

HTML 

<div id="table">
        <div class="table-row_1">
           <div class="table-cell"> <img src="" height="70px" width="70px">
            </div>
          <div class="table-cell">
           <h1>TEST</h1>
         </div>
       </div>
        <div class="table-row">
         <div class="table-cell">
           <form> <input type="text"> </form>
         </div>
         <div class="table-cell"> <input value="Submit" type="submit"> </div>
       </div>
     </div>

http://jsfiddle.net/antoniodl/mF3PU/2/ Пока

...