Получите div's, чтобы вести себя как таблица

Так что я действительно пытаюсь использовать исключительно divs, в отличие от использования таблиц для целей макета, но я все еще застрял здесь и там. Сегодня у меня есть один из этих случаев.Получите div's, чтобы вести себя как таблица

Рассмотрим следующую разметку:

<div style="width:943px;margin:0px auto;height:auto"> 
    <div style="display:block;clear:both"> 
     <div style="float:left;display:block-inline;clear:none;background:url(tl.png);width:26px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(t.png) repeat-x;width:865px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(tr.png);width:26px;height:25px"></div> 
    </div> 
    <div style="height:auto;display:block;clear:both"> 
     <div style="float:left;width:26px;display:block-inline;clear:none;background:url(l.png) repeat-y;width:26px;height:100%"></div> 
     <div style="padding:0 15px;height:100%;float:left;width:835px;display:block-inline;background:#FFF;clear:none;"> 
      <br /> 
      Some text heeere. 
      <br /> 
      Some more text heeere. 
     </div> 
     <div style="float:left;width:26px;display:block-inline;clear:none;background:url(r.png) repeat-y;width:26px;height:100%"></div> 
    </div> 
    <div style="display:block;clear:both"> 
     <div style="float:left;display:block-inline;clear:none;background:url(bl.png);width:26px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(b.png) repeat-x;width:865px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(br.png);width:26px;height:25px"></div> 
    </div> 
</div>

Теперь это то, что его делание:

alt text http://img97.imageshack.us/img97/4281/screenshot20100215at935.png

Заметьте, что это немного проходя мимо высоты страницы.

Это то, что я хочу, чтобы это сделать:

alt text http://img714.imageshack.us/img714/8504/screenshot20100215at936.png

Я хочу, чтобы жидко «вписаться» в текст без меня указав высоту. Похоже, что проблема заключается в двух боковых div, которые не будут работать, если вы не укажете высоту как 100%. Может быть, есть еще один способ?

Спасибо!

источник

2010-02-15 Constant Meiring

Почему вы хотите, чтобы divs действовали как стол? разве это не таблица? каковы недостатки использования таблицы, в которой вам нужно поведение, это таблица? – Rich

Можете ли вы сделать эскиз, чтобы показать, как он должен выглядеть? Трудно себе представить. –

@Rich Я задал себе тот же вопрос, но это выглядит как законный * макет *, а не табличные данные.Я уже собирался предлагать использовать стол, чистить дробовик и готовиться к пламенной войне :) –

Вы просили об этом, поэтому здесь идет. Это мой ручной, кросс-браузерный, стандартизованный метод создания границ изображений на гибких контейнерах.

Я предположил, что размер изображения 16px здесь, вам нужно будет отрегулировать это, чтобы удовлетворить. Кроме того, для ясности в отсутствии изображений я добавил границы. Очевидно, это нужно удалить.

Demo.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Borders</title> 
<style> 
.outer { 
    position:relative; 
    float: left; 
    border: 1px solid blue 
} 
.inner { 
    border: 1px solid green 
} 
.tl, .tm, .tr, .ml, .mr, .bl, .bm, .br { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
} 
.tm, .bm, .tl, .tr, .bl, .br { 
    height: 16px 
} 
.tl, .tr, .bl, .br { 
    width: 16px 
} 
.tm, .bm { 
    height: 16px; 
    margin: 0 0px 
} 
.tm { 
    background-repeat:repeat-x; 
    margin: 0 16px 
} 
.bm { 
    background-repeat:repeat-x; 
    margin: 0 16px 
} 
.tl { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.tr { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.bl { 
    position: absolute; 
    left: 0; 
} 
.br { 
    position: absolute; 
    right: 0; 
} 
.ml { 
    padding-left: 16px; 
    background-repeat:repeat-y 
} 
.mr { 
    padding-right: 16px; 
    background-repeat:repeat-y; 
    background-position: 100% 0 
} 
</style> 
</head> 
<body> 
<div class="outer"> 
    <div class="tm"> 
     <div class="tl"></div> 
     <div class="tr"></div> 
    </div> 
    <div class="ml"> 
     <div class="mr"> 
      <div class="inner"> 
       <h2>Lorem</h2> 
       <p>Ipsum dolor</p> 
      </div> 
     </div> 
    </div> 
    <div class="bm" > 
     <div class="bl"></div> 
     <div class="br"></div> 
    </div> 
</div> 
</body> 
</html>

источник

2010-02-16 09:10:48 graphicdivine

Спасибо! Это то, что я искал! Другой способ решения проблемы. –

удовольствие. На самом деле, на миллион миль от вашего исходного кода. – graphicdivine

Если данные являются табличными (это означает, что они попадают в правильные строки и столбцы семантически, а не только визуально), вы должны использовать таблицу.

Если это просто макет вы предпочитаете, есть правило CSS, которые могли бы помочь, но не для всех браузеров:

div.column { 
    display: table-column; 
} 

div.cell { 
    display: table-cell; 
}

Это предполагает, что вы назначьте все ваши «колонки» дива класса column и ваша «ячейка» разделяет класс cell.

Полный список вариантов отображения таблицы типа поведения:

table 
table-caption 
table-cell 
table-column 
table-column-group 
table-footer-group 
table-header-group 
table-row 
table-row-group

источник

2010-02-15 20:25:37 Anthony

Это, кажется, очень хакерский способ обойти вещи. Общая идея заключается в использовании div для макета и таблиц для табличных данных. Вышеприведенное является чисто макетом, а не табличными данными, поэтому я хочу использовать divs. Я знаю, как использовать таблицу для этого, но я хочу узнать, как использовать divs для достижения этого более правильным образом. –

Как использовать правило CSS хаки? Особенно, когда он явно предназначен для размещения табличного макета (чего вы хотите) без фактического использования таблиц (ваша точная цель) ??? Вам придется где-то пойти на компромисс, так как нет правильного способа работы в каждом браузере и для каждого размера экрана. Я думал, что предлагаю вам тот, который w3c разработан специально для ваших нужд. Использование float является взломанным, поскольку поплавки были предназначены для обертывания текста вокруг изображений, а не для выполнения встроенного блока. Кстати, это еще одно «хакерское» решение, которое вы, возможно, захотите рассмотреть. – Anthony

Я за использование таблиц за любой день, если только злобно распространять (и не так) клише, что таблицы сами по себе являются злыми. Но в этом случае я нахожу желание работать без таблиц и добиваться желаемого эффекта без 'table- *' свойств, полностью действующих. Кроме того, 'table-row' и consorts (как указывает сам Энтони) вызовут проблемы в семействе IE. –

Если ширина будет фиксированной почему бы не использовать один фоновое изображение для каждого из трех «строк»:

<style type="text/css"> 
.container {width:943px;} 
.header  {background:url(header.png) no-repeat;} 
.body   {background:url(body.png) repeat-y;} 
.footer  {background:url(footer.png) repeat-none;} 
</style> 

<div class="container"> 
    <div class="header">&nbsp:</div> 
    <div class="body"> 
     <br /> 
     Some text heeere. 
     <br /> 
     Some more text heeere. 
    </div> 
    <div class="footer">&nbsp;</div> 
</div>

Разделители, естественно, складываются и расширяются до полной ширины контейнера.

источник

2010-02-15 21:20:05 chprpipr

aaah спасибо. Это тот тип ответа, который я искал. Это был просто способ решения проблемы. Все остальные парни были совершенно правильны, но они думали, что вааай слишком техничен! Благодаря! –

Получите div's, чтобы вести себя как таблица

ответ

Смежные вопросы