css表格和浮动框架代码

以下是一个使用 CSS 表格和浮动框架的示例代码：

HTML 代码：

<div class="container">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
  <div class="content">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, leo sed vulputate congue, sapien arcu aliquet est, id interdum justo magna ac quam. Sed id lectus eget nibh iaculis hendrerit. Donec auctor pulvinar lacus a efficitur. Sed vel dui a eros fringilla feugiat. Nam euismod, orci in dignissim vestibulum, sapien enim lacinia elit, non interdum nibh quam vel sapien. Proin ullamcorper libero sed tristique commodo. Duis ut nisi et sapien tempor tristique. Quisque non mi semper, bibendum nulla a, bibendum quam. Praesent ut mauris interdum, accumsan velit vel, aliquam ipsum. Praesent suscipit diam non risus congue, in commodo sapien condimentum. Pellentesque malesuada justo vel sapien cursus, eu blandit odio lacinia.</p>
  </div>
</div>

CSS 代码：

.container {
  display: table;
  width: 100%;
}
.sidebar {
  display: table-cell;
  width: 25%;
  padding: 20px;
  background-color: #f0f0f0;
  vertical-align: top;
}
.content {
  display: table-cell;
  width: 75%;
  padding: 20px;
}

在此示例中，我们使用 CSS 表格布局来创建一个带有侧边栏和内容区域的页面。 `.container` 类用于创建一个表格容器，其中 `.sidebar` 和 `.content` 类表示表格单元格。我们使用 `display: table` 属性将容器和单元格转换为表格元素，以便它们可以相对于彼此进行布局。我们还使用 `display: table-cell` 属性来指定单元格的布局类型。最后，我们使用 `vertical-align: top` 属性来将侧边栏与内容区域顶部对齐。