文章/答案/技术大牛

发布

社区首页 >问答首页 >对齐自我:弯曲端不会将游戏板移动到页面底部？

问对齐自我:弯曲端不会将游戏板移动到页面底部？
EN

Stack Overflow用户

提问于 2019-03-31 21:16:22

回答 2查看 97关注 0票数 0

嘿，朋友们，我在做一个连接4的游戏。我用一张桌子做棋盘。我也在用柔性箱来定位板。我的身体设置为flex，并使用flex content将其水平地居中，我认为对齐项: flex-end会把它放在页面的底部，但它不起作用？如能提供任何帮助，将不胜感激：)

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

table {
	margin: auto;
	background-color: blue;
}

td {
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Connect Four</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="board-wrapper">
		<table>
			<tr class="row-1">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-2">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-3">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-4">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-5">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-6">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
		</table>
	</div>
</body>
</html>

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-31 21:23:01

董事会实际上是在底部。您只需要使用min-height: 100vh至少使父视图的高度达到视图端口的高度。

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: flex-end;
        min-height: 100vh;
}

table {
	margin: auto;
	background-color: blue;
}

td {
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Connect Four</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="board-wrapper">
		<table>
			<tr class="row-1">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-2">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-3">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-4">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-5">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-6">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
		</table>
	</div>
</body>
</html>

票数 0

Stack Overflow用户

发布于 2019-03-31 21:21:51

桌子是对齐的底部，但身体的高度不是视口高度。在身体上添加一个height: 100vh，你就会看到它。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55445526

复制

相似问题

问对齐自我:弯曲端不会将游戏板移动到页面底部？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐自我:弯曲端不会将游戏板移动到页面底部？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐自我:弯曲端不会将游戏板移动到页面底部？
EN