Создание горизонтального макета жидкости в CSS, который работает как таблица - PullRequest
Новая
       0

Создание горизонтального макета жидкости в CSS, который работает как таблица

2 голосов
/ 22 марта 2010

По сути, я ищу текучее решение в css, аналогичное приведенному ниже макету таблицы. Принципиальная схема этого макета - сетка 3х3, где пользователь может добавить контент в первую область флюида, и он расширит все содержимое. ширина страницы. Но если этот пользователь решит, что он хочет контент во 2-й и 3-й области, все 3 тд заполнят 33% ширины.

По сути, я спрашиваю, как мне создать макет на основе CSS, который может делать то же самое, что и макет таблицы? 

     <table width="100%">
     <tr>
      <td id="leftZone" >
      fluid area here
      </td>
      <td >
        fluid area here
      </td>  
      <td id="rightZone">
      fluid area here
      </td>
     </tr>
     </table>
     <table width="100%"> 
     <tr>
      <td valign="top" >
      fluid area here
      </td>
      <td >
     fluid area here
      </td> 
      <td >
      fluid area here
      </td>
     </tr> 
     </table>
     <table width="100%">  
     <tr>
      <td >
       fluid area here
      </td>
      <td >
       fluid area here
      </td> 
      <td >
       fluid area here
      </td>
     </tr>
     </table>

Ответы [ 2 ]

2 голосов
/ 22 марта 2010

Звучит так, будто вы имеете в виду святой Грааль раскладок. Проверьте эти ресурсы по теме:

http://www.alistapart.com/articles/holygrail

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

0 голосов
/ 22 марта 2010

Возможно, есть лучший способ сделать это, но это была моя первая идея. 

<!doctype html>
<html>
<head><style type="text/css">
    div
    {
        display: table;
    }
    div p
    {
        display: table-cell;
    }
</style></head>
<body>
<div>
    <p>1 fluid area here</p>
    <p>2 fluid area here</p>
    <p>3 fluid area here</p>
</div>
<div>
    <p>4 fluid area here</p>
    <p>5 fluid area here</p>
    <p>6 fluid area here</p>
</div>
<div>
    <p>7 fluid area here</p>
    <p>8 fluid area here</p>
    <p>9 fluid area here</p>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...