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

发布于 2024-09-27 01:10:43 字数 86 浏览 4 评论 0原文

我无法将屏幕分成 4 个宽度和高度均为 50% 的 div。 获得 50% 的宽度并浮动它们是没有问题的,但是如何才能让它们每个都有屏幕的 50% 的高度呢?

I am having trouble splitting a screen into 4 divs with width and height of 50%.
It's no problem to get the 50% width and float them around, but how can I get each of them to have a height of 50% of the screen?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暖伴 2024-10-04 01:10:43

我想你已经习惯了设置你的宽度;同样的东西也可以用于你的身高。

例如:

<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>

如果运行此命令,屏幕上将有 4 个相等的部分,左上角为红色,右上角为蓝色,左下角为绿色,右下角为橙色。

编辑
这适用于以下样式:

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
      }

I presume you've used to set your width; well the same thing can be used for your height.

For example:

<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>

If you run this, you will have 4 equal parts in your screen, with top-left being red, top-right being blue, bottom-left being green, and bottom-right being orange.

Edit
this works with the following styles:

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
      }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文