使用 div 布局

Question

我对布局做了一些研究，显然使用 HTML tables 来布局您的页面是错误的。所以另一种方法是使用 div's.

我设计了以下布局，想知道如何使用 div 来实现它。具体来说，我如何让顶部的 3 个面板与底部的面板垂直对齐，从而拉伸所有三个面板的长度。

我能否仅使用 CSS 和 HTML 来完成此操作？

设计如下：

Answer 1

是的，在纯 CSS 和 HTML 中完全有可能。

考虑这段代码：

.small-box {
          width: 200px;
          height: 200px;
          float: left;
          border: 1px solid #ccc;
        }
        
        .large-box {
          width: 606px;
          height: 200px;
          clear: both;
          border: 1px solid #ccc;
        }

<div class="small-box">some content</div>
       <div class="small-box">Some other content</div>
       <div class="small-box">Another content</div>
       <div class="large-box">Large box content</div>

这里最重要的是float和clear属性的使用。您可以使用 float 属性使 div 粘在一行中，如果您想要它们下面的内容，请使用 clear 到 'push' 下面的下一个元素。不过有一件事，要使用 float，元素必须定义 width 属性。

Answer 2

<table> 元素在用于布局时没有语义意义。它应该只用于数据网格。

也就是说，CSS 有一个不错的选择：

display: table;

和

display: table-cell;

看到这个 example。

您的布局由两个独立的 "tables" 组成。还有 table-row 用于在多行上创建具有相同宽度的列。它没有 colspan、thead 和其他 table 特定元素的替代品，但它应该可以完成简单布局的工作。

使用 div 布局

Layout using divs

html

css

tablelayout