Question

我想使用HTML表格，div或使用JavaScript来显示以下结构。

image with unsusual structure

我该怎么做？

Answer 1

您可以通过CSS position属性实现这一点。如果将其设置为绝对值，则可以使用CSS top，right，left和bottom属性轻松定位所有div标记。我是这样做的：

body, html {
	height: 100%;
	width: 100%;
}

div {
	display: block;
	position: absolute;
	margin: 5px;
	border: 5px solid red;
}

#A {
	width: calc(75% - 20px);
	height: calc(25% - 20px);
	top: 0;
	left: 0;
}

#B {
	width: calc(25% - 20px);
	height: calc(50% - 20px);
	top: 0;
	right: 0;
}

#C {
	width: calc(50% - 20px);
	height: calc(25% - 20px);
	top: 25%;
	left: 0;
}

#D {
	width: calc(25% - 20px);
	height: calc(50% - 20px);
	top: 25%;
	right: 25%;
}

#E {
	width: calc(25% - 20px);
	height: calc(25% - 20px);
	right: 0;
	bottom: 25%;
}

#F {
	width: calc(25% - 20px);
	height: calc(50% - 20px);
	bottom: 0;
	left: 0;
}

#G {
	width: calc(25% - 20px);
	height: calc(50% - 20px);
	bottom: 0;
	left: 25%;
}

#H {
	width: calc(50% - 20px);
	height: calc(25% - 20px);
	right: 0;
	bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Unsusual structure</title>
	<link href="unsusual.css" type="text/css" rel="stylesheet">
</head>
<body>
	<div id="A"></div>
	<div id="B"></div>
	<div id="C"></div>
	<div id="D"></div>
	<div id="E"></div>
	<div id="F"></div>
	<div id="G"></div>
	<div id="H"></div>
</body>
</html>

希望这有帮助！： - ）

Answer 2

table没有意义，因为table的前提是均匀间隔的网格。

JavaScript不是必需的，没有任何东西可以通过JavaScript实现，而使用纯CSS无法实现。

你想要的是一堆inline-block元素，它们在容器中具有预定义的大小，将它们限制在某些范围内，并使它们环绕并以这种方式组合在一起。

至于具体实现的目标，我认为你应该对自己做出某种尝试，并在必要时回过头来讨论一些事情是如何运作的。

有点像问“如何制造汽车”，首先参加机械课，如果遇到问题，可随意提问。

如何创建具有不寻常结构的表（html，css，js？）

2 个答案: