在同一行上使用2 div内联块调整窗口大小会触发奇怪的行为。
在同一行上使用2 div内联块调整窗口大小会触发奇怪的行为。
提问于 2020-02-27 18:14:16
当我将窗口调整到更小的大小时，第一个div就会下降。看起来，当第二个div的文本由于调整其框的大小而中断到一个新行时，就会发生这种情况。
我不明白为什么第一副不呆在顶端。我又不是把垂直对齐底部放在容器上。
我知道flex-box，但是我需要在这个项目中使用内联块，在这种情况下我不应该使用float，没有它它就能工作。
https://jsfiddle.net/ezp0j7fu/
HTML
<div class="container">
<div class="left">LEFT LEFT LEFT LEFT </div>
<div class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</div>
</div>CSS
body {
line-height: 0px;
}
.container {
background: black;
height: 40px;
width: 100%;
line-height: 0px;
}
.container div {
display: inline-block;
margin: 0px;
padding: 0px;
line-height: 20px;
height: 100%;
}
div.left {
background: blue;
height: 100%;
width: 30%;
}
div.right {
background: green;
height: 100%;
width: 60%;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-27 18:28:35
我已经看过很多次了。虽然我无法向您解释发生这种情况的确切原因(也许有更深入CSS知识的人可以让我们轻松)来修复它，但是您只需要向div.left标记添加一个float属性即可。那么你的左div和右div都将位于顶部。
div.left {
background: blue;
height: 100%;
width: 30%;
float:left;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60439392
复制相关文章
相似问题
腾讯云开发者
