Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Строка таблицы дивами

Автор: lazabt 15.2.2007, 19:45

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

Код


<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

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

Автор: lazabt 16.2.2007, 11:46

Цитата(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

Код


<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

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

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

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

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

Автор: japanes 16.2.2007, 12:40

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

Код


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

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

Автор: SelenIT 16.2.2007, 12:52

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

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

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

Автор: lazabt 16.2.2007, 13:18

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

)

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

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

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