我正在尝试使用MENU下的1px实线边框创建并对齐三个方框。我希望它们在我计划将图像放入其中时平等对齐。每排三个。我可以创建第一个div框并对齐它,但是当我尝试创建另一个时,它只是重叠第一个,我不能让它在线移动到下一个。尺寸是"高度" 340px和"宽度" 260px。因为我将再次使用这种格式,所以我将它们创建为div类或div ID。请有人详细解释一下。非常感谢。
感谢所有帮助人员。感谢。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<link rel="stylesheet" type="text/css" href="vines.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li><a href="indes.html">Home</a></li>
<li><a href="Videos.html">Videos</a>
<ul class="sub">
<li><a href="#">Vines</a></li>
<li><a href="#">Pugs</a></li>
<li><a href="#">Failing Dogs</a></li>
<li><a href="#">Crazy Dogs</a></li>
<li><a href="#">Funny Dogs</a></li>
</ul>
</li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
#row {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
margin: 5px 0px 5px 5px;
}
答案 0 :(得分:0)
如果我没有误解你的问题,这可能就是你要找的东西:
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
.cell {
width: 267px;
height: 370px;
border: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 5px 5px;
}
以下是其显示方式的示例:http://codepen.io/anon/pen/xsKwq
我希望我有所帮助
答案 1 :(得分:0)
我有一个代码:
<!DOCTYPE html>
<html>
<head>
<title> Game </title>
<style>
body{
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-color: rgb(232, 147, 0);
}
#nav{
background-color: #333;
}
#nav_wrapper{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
display: inline-block;
}
#nav ul li:hover{
background-color: yellow;
}
#nav ul li a,visited{
color: red;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover{
color: blue;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0px;
margin-left: -5px;
}
#nav ul ul li{
display: block;
}
#nav ul ul li a,visited{
color: red;
}
#nav ul ul li a:hover{
color: #099;
}
</style>
</head>
<script>
</script>
<body>
<h1> About the code </h1>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Game</a>
<ul>
<li><a href="C:/Users/Troike/Desktop/ScienceFairJavaScript/Ordinate.html">Play the game</a></li>
<li><a href="C:/Users/Troike/Desktop/ScienceFairJavaScript/HowToPlay.html">How to play</a></li>
<li><a href="C:/Users/Troike/Desktop/ScienceFairJavaScript/SourceCode.html">Source code</a></li>
</ul>
</li><li>
<a href="#">About the Creator</a></li>
</ul>
</div>
</body>
</html>
您可以编辑此代码,无论您希望菜单执行某些操作;否则你不必编辑它。