Как сделать XHTML «таблицей» с текучими строками таблицы - PullRequest
Новая
       14

Как сделать XHTML «таблицей» с текучими строками таблицы

2 голосов
/ 03 июня 2009

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

Если вы посмотрите на этот код HTML 4, он добивается того, чего я хочу, но я хотел бы достичь этого с помощью типа документа XHTML 1.0. 

<style type="text/css">
<!--
#apDiv1 {
        width:200px;
        height:100%;
            border:1px solid #000;
}

#apDiv1 table{
        width:200px;
        height:100%;
            border:1px solid #000;
}
-->
</style>
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr><td height="100%">blah</td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
    <td>
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr>
        <td height="100%"><p>blahfhfh</p>
          <p>dfhdf</p>
          <p>h</p>
          <p>dfh</p>
          <p>df</p>
          <p>h</p>
<p>&nbsp;</p></td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
    <td>
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr><td height="100%">blah</td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
  </tr>
  <tr>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%"><p>blahfhfh</p>
          <p>dfhdf          </p>
          <p>&nbsp;</p></td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
  </tr>
</table>
</div>

Ответы [ 2 ]

1 голос
/ 07 июня 2009

Существует кросс-браузерный способ создания сетки с использованием CSS с display:inline-block, однако он может быть не таким гибким, как вам бы хотелось (и код довольно уродлив, если вы хотите поддерживать Firefox 2 ).

Проблема, с которой вы можете столкнуться с «XHTML», заключается в том, что CSS без эмуляции ошибок IE5 (который вы получаете, когда вы не используете DOCTYPE или не используете одну из старых / неполных), ограничивает использование height:100%.

Высота в процентах не работает, если родительский элемент имеет auto высоту, и по умолчанию почти каждый элемент HTML имеет автоматическую высоту. Вы должны установить явную высоту для всех родительских элементов таблицы: 

html,body,#apDiv1 {
  height:100%;
}
0 голосов
/ 03 июня 2009

во-первых, сделайте ваш документ строго DOCTYPE HTML 4.01 и сначала проверьте его, используя http://validator.w3.org

затем вы можете изменить DOCTYPE на 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

и затем подтвердите его. Если есть какие-либо проблемы или вещи, которые ведут себя по-другому, вы можете задать конкретный вопрос здесь.

...