右侧元素在float：left之后向下移动

Question

我有以下html：

<div id="table"></div><br>
<div id="slider-range" type="range"/></div>

css代表他们：

#table {
    width: 507px;
    height: 200px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
}
#slider-range {
    height: 200px;
    float: left;
}

我希望这些元素能够彼此对齐，这样它们可以并排放置一些边距并且到它们的顶部位置也是一样的。但是，我得到以下内容：

如何让我的滑块与桌子垂直对齐？

Answer 1

您可以尝试调整＆＃34;滑块范围＆＃34;的最高边距。为了将它压得更靠近页面的顶部，从而将它与桌子对齐。

或者，我想，相反，你可以使表格div的上边距更大，以便它被推下并排列在滑块旁边。

Answer 2

您可以使用位置将元素放置在偏移父级中：相对于声明子级的偏移父级和绝对位置。

这意味着您可以避免使用会导致一些头痛的浮子。

在这个示例中，我在问题中使用了宽度等像素值，但如果您想要更流畅的网格，则可以使用百分比。此外，我还为了显示div的位置而粘贴了一些彩色边框。

<div id="container">
    <div id="table"></div>
    <div id="slider-range" type="range"/></div>
</div>

#table {
    border: 2px solid red;
    width: 507px;
    height: 200px;
    overflow: hidden;
    margin-right: 20px;
}
#slider-range {
    border: 2px solid blue;
    height: 200px;
    position: absolute;
    width: 35px;
    right: 0px;
    top: 0px;

}

#container {
    border: 2px solid yellow;
    width: 550px;
    height: 200px;
    position: relative;
}