如何将某物与其 parent 前面的元素垂直对齐

Question

鉴于此 html：

<header>Some header</header>
<div>
    <div class="right-of-header">should be to the right of header</div>
    <div>Some mor text is here</div>
</div>

我希望第一个内部 div 的内容显示在 header.

的右侧

如果不使用 javascript 实际移动 DOM 元素，这可能吗？

我刚发现这个问题：Position one element relative to another in CSS 但这对我不起作用，因为我不知道 header 元素的大小和宽度。换句话说，解决方案应该响应不同的布局。

有个jsfiddle for it here

Answer 1

这个有效：https://jsfiddle.net/djgmj89c/

想法是

制作 float: left
把应该放在右边的内容float: right;
在应该向右移动的元素之后创建元素clear: both;

结果如下css：

header {
    float: left;
}
.clear {
    clear: both;
}
.right-of-header {
    float: right;
}

Answer 2

这里的问题是 div 的默认 display 设置为 block。

我的建议是修改你的html。将 header 的 display 值更改为 display: inline-block;，将 right-of-header 的值更改为 display: inline;。

如下：

<style>
header {
    font-size: 30px;
    display: inline-block;
}

.right-of-header {
    font-size: 8px;
    width: 50px;
    display: inline;
}
</style>

<header>Some header</header>
<div class="right-of-header">should be to the right of header</div>
<div>
    <div>Some mor text is here</div>
</div>

这里有一个演示：https://jsfiddle.net/z1c9Lgzo/

编辑：

因为你不能修改你的html，另一个解决方案（我完全反对，但似乎找不到其他方法） 将相对地改变 position。像这样：

.right-of-header {
    font-size: 8px;
    width: 50px;
    float: right;
    position: relative;
    top: -40px;
}

这里有一个演示：https://jsfiddle.net/g4srpcpn/

您可能需要调整 top 值以更好地对齐。

Answer 3

如果您的父容器具有相对位置，也许这会对您有所帮助。

<header>Some header</header>
<div>
    <div class="right-of-header">should be to the right of header</div>
    <div>Some mor text is here</div>
</div>

<style>
header {
    font-size: 30px;
    display: inline-block
}

header + div{
    display: inline-block;
    float: right;
}

header + div > div:nth-of-type(2){
    position: absolute;
    left: 0;
    padding: 10px;
}

.right-of-header {
    font-size: 8px;
    width: 50px;
}
</style>

https://jsfiddle.net/0wqud60n/1/

如何将某物与其 parent 前面的元素垂直对齐

How to vertically align something with the element in front of its parent

css

vertical-alignment

css-float

responsive-design