四个同等高度和宽度的div [英] Four divs of equal height and width

问题描述

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

The question seems to be simple but I am not getting it done.

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

I have a web project I am working on with body's overflow set to hidden. So I cannot put contents in the page with more than the height of the available space or else they will be hidden.

现在我有四个图表/图表用于显示每个页面占用相同的空间。我试图把每个放在2行2列的表格中。但无论您尝试什么，表格的高度总是会溢出页面高度，并且内容变得隐藏。我可以通过给每个50％的宽度和设置table-layout来控制单元格的宽度：fixed;

Now I have four graphs/charts to show on a page each taking equal space. I have tried to put each in a table of 2 rows and 2 columns. But no matter what you try, table's height always overflows the page height and the contents become hidden. I could though control the width of the cells by giving each 50% width and setting table-layout: fixed;

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

How can I implement it? Using div or using table? Please help me create div or table cells with exactly the same size in height and width; and not overflow the page height.

推荐答案

您可以使用列表：

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

CSS：

CSS:

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

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

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

这篇关于四个同等高度和宽度的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！