我运行下面的代码来创建位于屏幕中间居中的三列。我遇到的问题是，当我向每个跨度添加不同数量的内容时，一个最终比其他两个要高得多。主页上的背景为黑色，每个跨度为白色。
<div style="width:100%; text-align:center; min-width:1200px;">
<span style="display: inline-block; width:300px; height:300px; background-color:#fff; ">
Content
</span>
<span style="display: inline-block; width:300px; height:300px; background-color:#fff;">
Content
</span>
<span style="display: inline-block; width:300px; height:300px; background-color:#fff; margin:0px; padding:0px;">
Content blah blah blah
</span>
</div>
如何使所有跨度都处于相同的垂直位置。我已经将高度设置为所有相同的值
最佳答案
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
background:black;
}
.mydiv{
margin-left:100px;
width:300px;
float:left;
}
</style>
</head>
<body>
<div style="width:100%; text-align:center; min-width:1200px;">
<div class="mydiv"><span style="display: inline-block; width:300px; background- color:#fff; ">
blahblah blah blah blahblah blah blah blahblah blah blah
</span></div>
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff;">
Hello Wolrd!blah blah blahblah blah blah
</span>
</div>
<div class="mydiv"><span style="display: inline-block; width:300px; background-color:#fff; margin:0px; padding:0px;">
Content blah blah blah
</span></div>
</div>
</body>
</html>
关于html - Div内的垂直对齐范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12512114/