如何将页面拆分为4个相等的部分

如何将页面拆分为4个相等的部分

本文介绍了如何将页面拆分为4个相等的部分?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想将页面分为四个相等的部分,每个部分的高度和宽度都相同(50-50%)。

I want to divide my page into four equal parts, each of same height and width (50-50%).

不想使用JavaScript。如果浏览器窗口是(),则我想要块< div> s)

I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.

我没有使用CSS很长时间。我不知道如何处理这个问题。

I have not worked with CSS for a long time. I've no idea how to handle this.

推荐答案

HTML

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

CSS

html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }

演示在

这篇关于如何将页面拆分为4个相等的部分?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 03:44