html - 为什么我的 会根据内容轻微移动？

Question

所以我有两个 <div> s 嵌套在另一个 .

类似于:

<div class="wrapper">
    <div class="left_sidebar"></div>
    <div class="text_area"></div>
</div>

我注意到当 text_area <div>包含足够的文本，它会稍微将 left_sidebar 向左推并移动。当我的文字帖子很短时，它不会这样做。

这是我的 CSS:

.wrapper {
    position: relative;
    margin-left: 20%;
}

.left_sidebar {
    position: absolute;
    margin-top: 1.5%;
    width: 20%;
    border-right: 1px solid #777F7F;
    text-align: right;
    padding-right: 1%;
}

.text_area {
    position: absolute;
    text-align: left;
    margin-left: 22%;
    font-size: 1em;
    width: 45%;
}

编辑:我觉得我应该提一下，这不会发生在我的 23 英寸 1080p 显示器上，但它确实发生在我的 11 英寸 768p 显示器上。

Answer 1

我想你可以从 left_sidebar 和 text_area 中去掉 position: absolute; 因为我没有看到这个定位的任何线索.而不是 position: absolute;，我猜使用 float:left; 会帮助你。

See this fiddle .