1

我将此 div 布局设置为光标响应，我计划稍后将字体更改为隐藏直到悬停，但现在我正在用我的 div 中的文本测试水域，它们会弹出到大约 div 的空间本身。这是CSS ..

-css-

@charset "utf-8";
/* CSS Document */
body {
    background:#000;

}

.grid_0 {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background:#000000;
    max-width:1000px;
    padding:auto;
margin:auto;
vertical-align:top;
}


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9
{
    width:30%;
    height:30%;
    margin:.5% .5%;
    max-width:300px;
    max-height:300px;
    min-width:250px;
    min-height:250px;
    overflow:hidden;
    display:inline-block;

}

.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9{
    background: rgba(51,51,51,1);

}
.grid_5:hover,.grid_9:hover {
    background: rgba(0,153,204,1);
    transition-property: background;

}
.grid_2:hover,.grid_6:hover,.grid_7:hover{
    background: rgba(51,204,51,1);
    transition-property: background;
}
.grid_3:hover,.grid_4:hover,.grid_8:hover{
    background: rgba(102,204,153,1);
    transition-property: background;
}

.img{
    width:100%;
}

.container {
    width:1000px;
    height:1000px;
    vertical-align:top;
}
strong {
    font-family:Arial, Helvetica, sans-serif;
    font-size:30px;
    color: rgba(51,51,51,1);
}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
</head>


<body>


<div class="grid_0">

<div class="grid_1">
<img class="img" src="img/b2logo.png">
</div>

<div class="grid_2">
<p>
hello
</p>
</div>

<div class="grid_3">
<p>
hello
</p>
</div>

<div class="grid_4">
</div>

<div class="grid_5">
</div>

<div class="grid_6">
</div>

<div class="grid_7">
</div>

<div class="grid_8">
</div>

<div class="grid_9">
</div>

</div>
</body>
</html>
4

1 回答 1

0

尝试设置vertical-align:top;您的grid_X课程

于 2013-07-10T05:49:20.440 回答