我有 3 个 div 容器。为什么 3 个 div 容器不在一行中？如果我用相同的内容填充每个容器，它们就会排成一行。如果我在每个框中填充不同的内容，它看起来像这样:
这是 myPage +代码:
*{
margin: 0px;
padding: 0px;
}
section{
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #00ff00;
overflow: hidden;
text-align: center;
}
.divbox{
display: inline-block;
height: 300px;
width: 250px;
border: 4px solid black;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: brown;
}
.divbox:hover{
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" href="index.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<section>
<article>
<div class="divbox">
<img src="http://malsup.github.com/images/beach1.jpg" width="250" height="250" />
<a href="#">Link1</a>
</div>
<div class="divbox">
</div>
<div class="divbox">
content
</div>
</article>
</section>
</body>
</html>最佳答案
vertical-align 的默认值(适用于内联级和 table-cell 元素)是 baseline(前一个元素的基线)。您需要将 vertical-align: top 添加到 .divbox。
.divbox {
display: inline-block;
height: 300px;
width: 250px;
border: 4px solid #000;
margin: 200px 50px;
transition: all 0.5s ease 0s;
background-color: #A52A2A;
vertical-align: top;
}
关于html - 3 div 容器不垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27992274/