我有下面的代码。编织是
http://liveweave.com/JVtNIk
<!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>标记中一样。
希望你理解我的解释。