将屏幕分成4个矩形,50%高度,50%宽度

Sve*_*uem 4 html css height width

我无法将屏幕分成4个宽度和高度为50%的div.获得50%的宽度并将它们漂浮在周围是没有问题的,但我怎样才能使每个高度达到屏幕的50%?

小智 10

我猜你已经习惯了你的宽度; 同样的事情可以用于你的身高.

例如:

<html>
<head>
</head>
<body>

<div style="background-color:red; width:50%; height:50%; float:left">
</div>

<div style="background-color:blue; width:50%; height:50%; float:right">
</div>

<div style="background-color:green; width:50%; height:50%; float:left">
</div>

<div style="background-color:orange; width:50%; height:50%; float:right">
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

如果你运行它,屏幕上将有4个相等的部分,左上角是红色,右上角是蓝色,左下角是绿色,右下角是橙色.

编辑 此方法适用于以下样式:

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
      }
Run Code Online (Sandbox Code Playgroud)