Главные новости

display: table - или табличная верстка div, как расположить 3 и более div в ряд и чтобы они растянулись по высоте одинаково

display: table - или табличная верстка div, как расположить 3 и более div в ряд и чтобы они растянулись по высоте одинаково
Данный html и сss урок посвящен простому позиционированию и превращению нескольких <div> в таблицу.
css свойства позволят уменьшить код и улучшить верстку будущих сайтов.

Простой пример:

<style type="text/css">
  .tablica_table{
  display: table;
  width: 80%;
  border-spacing: 10px 10px;
  margin:0px auto;
  }
.td_echeyka1{
  display: table-cell;
  padding: 10px;
  width:20%;
  background:red;
  }
  .td_echeyka2{
  display: table-cell;
  padding: 10px;
  width:50%;
  background:blue;
  }
  .td_echeyka3{
  display: table-cell;
  padding: 10px;
  width:30%;
  background:yellow;
  }
  </style>
<div class="tablica_table">
  <div class="td_echeyka1">Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.
  css свойства позволят уменьшить код и улучшить верстку будущих сайтов.Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.
  css свойства позволят уменьшить код и улучшить верстку будущих сайтов.</div>
  <div class="td_echeyka2">Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.
  css свойства позволят уменьшить код и улучшить верстку будущих сайтов.</div>
  <div class="td_echeyka3">Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.
  css свойства позволят уменьшить код и улучшить верстку будущих сайтов.</div>
</div>

Результат:

Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.css свойства позволят уменьшить код и улучшить верстку будущих сайтов.Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.css свойства позволят уменьшить код и улучшить верстку будущих сайтов.
Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.css свойства позволят уменьшить код и улучшить верстку будущих сайтов.
Данный html и сss урок посвящен простому позиционированию и превращению нескольких div в таблицу.css свойства позволят уменьшить код и улучшить верстку будущих сайтов.