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的内容显示在标题的右侧。

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

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

有一个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: 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/

如何将某些内容与其父

3 个答案: