四个高度和宽度相等的 div答案

【问题标题】：Four divs of equal height and width四个高度和宽度相等的 div
【发布时间】：2012-06-03 03:57:56
【问题描述】：

这个问题似乎很简单，但我没有完成。

我正在处理一个 Web 项目，其中 body 的溢出设置为隐藏。所以我不能在页面中放置超过可用空间高度的内容，否则它们将被隐藏。

现在我有四个图形/图表要显示在一个页面上，每个都占用相等的空间。我试图把每一个都放在一个 2 行 2 列的表中。但是无论你怎么尝试，表格的高度总是会超出页面高度，并且内容会被隐藏。我可以通过给每个 50% 的宽度和设置 table-layout: fixed; 来控制单元格的宽度；

我该如何实现它？使用 div 还是使用 table？请帮我创建高度和宽度完全相同的 div 或表格单元格；并且不会溢出页面高度。

【问题讨论】：

标签： html css tablelayout

【解决方案1】：

您可以使用列表：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS：

html, body, ul {
    width: 100%;
    height: 100%;
}

li {
    float: left;
    width: 50%;
    height: 50%;
}

现场演示： http://jsfiddle.net/U7WJ4/1/show/light/

【讨论】：

【解决方案2】：

解决方案 - 根据自己的需要进行调整。

<style type="text/css">
    #container {
        height:200px;
        width:400px;
        overflow:hidden;
        border:1px solid #000;
    }
    .item {
        float:left;
        height:100px;
        width:50%
    }
    .item-a { background-color: #CCC; }
    .item-b { background-color: #AAA; }
    .item-c { background-color: #900; }
    .item-d { background-color: #9CC; }
    .clear {
        clear:left;
    }
</style>

<div id="container">
    <div class="item item-a">abc</div>
    <div class="item item-b">abc</div>
    <div class="item item-c">abc</div>
    <div class="item item-d">abc</div>
    <div class="clear"></div>
</div>

这里是等效的表格方法，其 CSS 与 div 方法相同

<div id="container">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td class="item item-a">a</td>
            <td class="item item-b">b</td>
        </tr>
        <tr>
            <td class="item item-c">c</td>
            <td class="item item-d">d</td>
        </tr>
    </table>
</div>

【讨论】：