我有以下代码。编织是
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS 是
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
请帮助我理解 box2 内容不是从顶部开始而是从底部开始的原因？有什么具体原因吗？我可以通过添加 float 来解决它，但我只是对这种行为感到好奇。
请有人帮助我理解。
提前致谢
最佳答案
你有这种行为是因为 .box1 的基线是它的最后一行文本。 .box2从与最后一行在同一行开始，以便解释为什么它位于底部。然后 inline属性使其在 .box1 下继续就像.box2在<p>标签。
希望你理解我的解释。
关于CSS 内联问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25787321/