我正在尝试在 MENU 下创建并对齐三个具有 1px 实线边框的框。我希望它们在我计划将图像放入其中时均匀对齐。每排三个。我可以创建第一个 div 框并对齐它，但是当我尝试创建另一个 div 框时，它只是与第一个 div 框重叠，我无法让它内联移动到下一个。尺寸为“高度”340 像素和“宽度”260 像素。因为我将再次使用这种格式，所以我将它们创建为 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;
}
最佳答案
如果我没有误解你的问题，这可能就是你要找的:
<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
希望对你有帮助
关于html - 如何在菜单下创建并对齐三个 'div' 框，？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24944679/