0

我正在尝试创建一个显示三行 7 个正方形的索引页。这听起来很蹩脚，但我有一些 jQuery 想法，我认为最终会让它看起来很酷。我认为为正方形创建空 div 可以解决问题，并且可以让我简单地定义所有 div 的大小（高度和宽度）。问题：无法让它们显示。

我读了很多关于这个问题的其他问题，但修复总是为 div 定义一个宽度，但这对我不起作用。我还考虑将其设置为表格，因为这基本上是我希望它看起来的样子，但 MDN 显示为“不推荐用于布局”，我想编写符合标准的代码。

我将我的代码与我在 codecademy 的 jQuery 课程中看到的一些代码进行了比较，我看不出任何真正的差异会导致 codecademy 代码显示正方形而我的代码什么也不显示。关于如何解决这个问题并让我的愿景在页面上呈现的任何帮助或建议都会很棒！谢谢。

这是html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
        <link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<container class="row">
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
</container>
<container class="row">
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
</container>
<container class="row">
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>   
</container>
</body>
</html>

和CSS：

body {
background-color: gray;
height: 100%;
width: 100%;
}
.row {
width: 600px;
height: 100px;
padding: 1em;
text-align: center;
}
.sqtop {
height: 20px;
width: 20px;
min-height: 10px;
min-width: 10px;
color: black;
background-color: yellow;
border-radius: 5px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
4

3 回答 3

0

您的绝对定位弄乱了布局。基本上，由于所有的 div 都有一个绝对位置，它们都显示在彼此的顶部。

另一个问题是您只对其中一行进行样式设置，而另外两行没有附加任何 CSS 属性。

这是对 CSS 的修复：

身体{背景颜色：灰色；高度：100%；宽度：100%；} .row { 宽度：600px; 高度：100px；填充：1em；文本对齐：居中；} .sqtop, .sqmid, .sqbtm { 高度：20px; 宽度：20px；最小高度：10px；最小宽度：10px；颜色：黑色; 背景颜色：黄色；显示：内联块；边框半径：5px；垂直对齐：中间；}

但这并不能解决所有问题。盒子仍然需要成行。由于 div 不知道换行符的确切位置，因此您可以添加一个 div 来在 HTML 中创建换行符。这就是它的样子：

<container class="row">
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
</container>
<div style="clear:both"></div>
<container class="row">
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
</container>
<div style="clear:both"></div>
<container class="row">
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>   
</container>

那应该给你 3 行和 7 个 div。

于 2013-11-14T22:06:47.603 回答
0

remove absolute position, http://jsfiddle.net/ZG7jZ/

.sqtop {
   height: 20px;
   width: 20px;
   min-height: 10px;
   min-width: 10px;
   color: black;
   background-color: yellow;
   border-radius: 5px;
   /*position: absolute;*/
   display: inline-block;
   vertical-align: middle;
}
于 2013-11-14T21:59:56.653 回答
0

问题是您只是将样式应用于sqtop. 尝试这个：

body {
background-color: gray;
height: 100%;
width: 100%;
}
.row {
padding: 1em;
text-align: center;
    overflow: hidden;
}
.row>div {
height: 20px;
width: 20px;
color: black;
background-color: yellow;
border-radius: 5px;
vertical-align: middle;
    display: inline-block;
}

http://jsfiddle.net/keurr/1/

于 2013-11-14T22:03:24.677 回答