Question

堆垛。我试图让我的盒子类真正成为一个盒子。我希望box类的高度和宽度为字体大小的10em。例如，盒子的高度和宽度应为12px * 10 em。

<!DOCTYPE html>
<!--
     Your name does here
     The date goes here
     CISC 131

     A short description of the project goes here
-->
<html lang="en">
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="tictactoe.js" type="text/javascript"></script>
<style type="text/css">
*{
    border  : 0;
    margin  : 0;
    padding : 0;
}

body
{
    font-family : "Times New Roman";
    font-size   : 12px;
    width       : 33em;
    padding-top : 5em;
    text-align  : center;
    margin-left : auto;
    margin-right: auto;
}
.square
{
    font-size   : 8em;
    text-align  : center;
    float       : left;
    height      : 10em;
    width       : 10em;
    background-color: red;
}

</style>

</head>
<body>
<div id="gameBoard">
<div class"square" id="box0">dwda</div>
<div class"square" id="box1">wadawd</div>
<div class"square" id="box2"></div>
<div class"square" id="box3"></div>
<div class"square" id="box4"></div>
<div class"square" id="box5"></div>
<div class"square" id="box6"></div>
<div class"square" id="box7"></div>
<div class"square" id="box8"></div>
<div id="ticTacToeBoard"></div>
</div>

</body>
</html>

Answer 1

我建议您使用相同的度量单位，px或em。我用你的尺码制作了一个小jsfiddle。我将font-size设置为1em，将box size设置为10em。

gameBoard计算是：

3*10em + 2em (margin-right for all but last in row) = 32em

这是你想要做的吗？

如何让我的元素继承宽度和宽度高度？

1 个答案: