VPF::Строка таблицы дивами - Форум программистов

lazabt

Дата 15.2.2007, 19:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 22.8.2006

Репутация: нет
Всего: 5

Люди, подскажите чайнику плиз, как сделать

Код


<table>
  <tr>
    <td>aaa</td>
     ...
    <td>aaa</td>
  </tr>
</table>

на дивах?

Так:

Код


<style>
div.float {
  float:left;
}
</style>
<div>
  <div class="float">aaa</div>...<div class="float">aaa</div>
</div>

плохо, т.к. div-ы в отличие от table перескакивают при уменьшении ширины внешнего дива.

japanes

Дата 15.2.2007, 20:34 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Внешнему диву задать тот же float:left;

lazabt

Дата 16.2.2007, 11:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 22.8.2006

Репутация: нет
Всего: 5

Цитата(japanes @ 15.2.2007, 20:34)

Внешнему диву задать тот же float:left;

Не помогает:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div {
    border: 1px solid #000000;
    float:left;
}

</style>
</head>
<body>
    <div style="width:10px;">
        <div>aaa</div>
        <div>aaa</div>
        <div>aaa</div>
        <div>aaa</div>
    </div>
</body>
</html>

japanes

Дата 16.2.2007, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Код


<style>
div.float {
  float:left;
  height:100px;
  border:1px solid green;
}
div#layout{
  float:left;
  width:100px;
  border:1px solid red;
}
</style>
<div>
  <div class="float">aaa</div>
  <div class="float">aaa</div>
</div>

а так?

Добавлено @ 12:24
пардон не правильно понел. надо так

Код


<style>
div.float {
  float:left;
  height:100px;
  border:1px solid green;
}
div#layout{
  float:left;
  min-width:100px;//width:100px;
  border:1px solid red;
}
</style>
<div>
  <div class="float">aaa</div>
  <div class="float">aaa</div>
</div>

lazabt

Дата 16.2.2007, 12:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 22.8.2006

Репутация: нет
Всего: 5

И так, к сожалению, нет smile

Как только у класса div#layout делаем width меньше, чем ширина внутренних дивов (10px например), внутренние съезжают вниз.

А нужна ПОЛНАЯ имитация строки таблицы:
1. внешний контейнер должен растягиваться на ширину внутренних
2. внутренние контейнеры ВСЕГДА располагаются в ОДНУ строку

Неужели нет решения??? Не понимаю, какой тогда смысл в блочной верстке, если такая тривиальная задача не решается без всяких хаков...

japanes

Дата 16.2.2007, 12:40 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

ширину для div#layout задавай с хаком:

Код


div#layout{
  float:left;
  min-width:10px;//width:10px;
  border:1px solid red;
}

у внутренних блоков поубирай бордеры

SelenIT

Дата 16.2.2007, 12:52 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

japanes, это не поможет.

lazabt, попробуйте white-space: nowrap для "таблицы" и display:inline для "ячеек".

Вообще-то в CSS есть "родные" средства имитации таблиц, строк и ячеек чем угодно - display:table, table-row и table-cell соответственно. Вот если бы только IE их понимал!..

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

lazabt

Дата 16.2.2007, 13:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 22.8.2006

Репутация: нет
Всего: 5

Цитата(SelenIT @ 16.2.2007, 12:52

)

lazabt, попробуйте white-space: nowrap для "таблицы" и display:inline для "ячеек".

Кажется это то, что нужно! Спасибо!

Да, жаль что IE не понимает display:table-*... Мне как раз это и нужно: не ломая dom-дерева в динамике менять расположение.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »