Fatal编程技术网
  • html/
  • Html 四个带浮动中间元件的相等盒子

Html 四个带浮动中间元件的相等盒子

html css

Html 四个带浮动中间元件的相等盒子,html,css,Html,Css,目前我正在制作一个页面，其中我有4个div，每个div的宽度和高度各占50%。 我想制作一个div，其中一个框可以浮动在页面的正中心，与这些元素重叠。 这是目前为止的编码 <html> <head> </head> <body> <div style="background-color:red; width:50%; height:50%; float:left"> </div> <div style="b

目前我正在制作一个页面，其中我有4个div，每个div的宽度和高度各占50%。 我想制作一个div，其中一个框可以浮动在页面的正中心，与这些元素重叠。 这是目前为止的编码

    <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>
我认为您应该尝试绝对定位。这里是另一个SO问题，有人问如何将弹出对话框居中。类似于你正在做的事情。
看看Steve Robbins和Cristian Toma提供的答案。我认为这些可能会对您有所帮助。

绝对定位似乎是最明显的解决方案

html，
身体{
身高：100%；
位置：相对位置；
}
.中心{
宽度：50%；
身高：50%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景#663399；
}
提供JSFIDLE是否有用可能是绝对定位？对于这些类型的问题，你应该总是做一个JSFIDLE。尝试绝对定位，元素的上半部分为50%，下半部分为负边距。左侧使用相同的，它应该在中间，正如注释所说，如果你想要一个中间div而不影响其余div，它必须是
绝对的
定位，还要记住为该元素提供一个
z索引。最后一件事，试着用它来包装你的四个浮动盒子，以防止奇怪的行为