html - 表格的CSS自动扩展宽度

Question

我正在建立一个网站，我需要这样的布局:

+---+--------------+
|#  |              |
|n  | #page        |
|a  | table.basic  |
|i  |              |
|g  |              |
|a  |              |
|t  |              |
|i  |              |
|o  +--------------+
|n  | #pagination  |
+---+--------------+

这是 HTML 和 CSS:

 #navigation {
   float: left;
   width: 150px; /* Fixed size*/
   min-height: 100%;
   margin: 0;
   padding: 0 2em;
 }
 #page {
   float: left;
   width: auto; /* Auto size. Something need to be changed here.*/
   padding-left: 2em;
   vertical-align: top;
 }
 #pagination {
   font-size: 1.3em;
   position: relative;
   clear: both;
   padding: 0.5em;
   text-align: center;
 }
 table.basic tr th,
 table.basic tr td {
   /* or change something here*/
   border: 2px solid #000000;
   font-weight: bold;
   margin: 1em 0;
   padding: 1em;
 }

<div id="navigation">Show navigation</div>
<div id="page">
  <table class="basic">
    <tr>
      <th>id</th>
      <th>text</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Long long thing</td>
    </tr>
  </table>
  <div id="pagination">Show pagination</div>
</div>

带有表格的页面内容需要自动展开，所以不会浮在导航栏下面。有什么想法吗？

Answer 1

#page不需要 float ，但是需要处理 float 导航。

做到这一点的经典而简单的方法是使用 overflow:hidden;。这会更改 block 格式化上下文。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

div {/*demo purpose*/ border:solid;}
#navigation {
   float: left;
   width: 150px; /* Fixed size*/
   min-height: 100%;
   margin: 0;
   padding: 0 2em;
 }
 #page {
   overflow:hidden;
   padding-left: 2em;
   vertical-align: top;
 }
 #pagination {
   font-size: 1.3em;
   position: relative;
   clear: both;
   padding: 0.5em;
   text-align: center;
 }
 table.basic tr th,
 table.basic tr td {
   /* or change something here*/
   border: 2px solid #000000;
   font-weight: bold;
   margin: 1em 0;
   padding: 1em;
 }

<div id="navigation">Show navigation</div>
<div id="page">
  <table class="basic">
    <tr>
      <th>id</th>
      <th>text</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Long long thing</td>
    </tr>
  </table>
  <div id="pagination">Show pagination</div>
</div>