Три div - оформить как стол

Question

Три div - оформить как стол

0

У меня есть три div:

<div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

.one {
    width: 100px;
    height: 200px;
    background-color: red;
}

.two {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

.three {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}

Но это плохо работает. Я бы хотел получить:

<table>
    <tr><td rowspan="2" class="one"></td><td class="two"></td></tr>
    <tr><td class="three"></td></tr>
</table>

ЖИТЬ

Как я могу сделать это с DIV, как и с TABLE?

marcosguuis 18 сен. 2013, в 00:39

Источник

Теги:

html

css

3 ответа

1

Простым ответом является использование CSS для отображения его в виде таблицы.

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

display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;

Jack Tuck 17 сен. 2013, в 20:08

0

Попробуйте, что-то вроде:

.one,.two,.three{
  width:100px; float:left;
}
.one{
   height:200px; background-color:red;
 }
.two{
   height:100px; background-color:green;
}
.three{
  height:100px; background-color:blue; clear:left;
}

В принципе, просто clear:left; на .three. Чтобы сохранить высоту контейнера для всех 3 div вы можете добавить div и clear:left; на нем без плавания.

PHPglue 17 сен. 2013, в 21:08

Ещё вопросы

adnrw · Accepted Answer · 2013-09-17T20-39-00.000Z

Есть несколько способов добиться этого.

Один из вариантов - использовать display:table-cell и соответствующий стиль, чтобы заставить его вести себя точно как таблица.

Другим является использование float как у вас, но определение width контейнера и использование clear для размещения их по желанию.

Здесь сценарий последнего варианта: http://jsfiddle.net/adnrw/7datp/4/ с padding и margin показанной в соответствии с table созданной в cellspacing и cellpadding