0

CSS

<style>
#layer1 {
    height: 60px;
    background-color:#00FF00;   
}
#layer2 {
    height: 60px;
    background-color:#FFFFCC;

}
</style>

HTML

<div id="layer1">
This is the first div.
</div>
<div id="layer2">
This is the second div.
</div>

Question

If do not change the structure of this HTML, and only change the CSS code, is it possible to move content from one div to the other? I want to move the text "This is the first div." to layer2, to make the text: "This is the first div." show at the left side of layer2, and make the text: "This is the second div." to show at the right side of layer2.

4

4 回答 4

1

你的问题很容易理解你在问什么，所以有些人说没有 javascript 是不可能的。但据我了解，您的问题是对float: left;您的#layer1 和#layer2 进行处理，如果这可能是这样的话

这是第一个 div。这是第二个div。

#layer1, #layer2{
float: left;
}

如果有可能使用 float: left; 到#layer2 和浮动：对；到#layer1

这是第二个 div。这是第一个 div。

#layer2{
float: left;
}
#layer1{
float: right;
}
于 2013-08-07T03:19:35.603 回答
0

不，如果没有触摸 html 结构或使用 javascript，就不可能做到这一点。

只有当有一种方法可以在 CSS 中选择 div 内的文本元素时才有可能，然后我们可以将其向下推，这将扩展另一个 div 以适应它。

于 2013-08-07T03:10:35.457 回答
0

您可以使用 CSS3content属性。但是，不建议这样做，因为它会使您的代码看起来非常奇怪。您可以手动移动内容，这不会产生影响。除非我不明白你在说什么，在这种情况下，请澄清。如果你想让它响应，那么只需使用 Javascript 代替。

于 2013-08-07T02:39:55.150 回答
0

如果你的意思是你希望元素像这样显示......

这是第一个 div。这是第二个div。

...而不是像这样...

这是第一个 div。

这是第二个div。

...那么你不需要在两者之间“移动内容”来做到这一点。使用display:inline-block;下面示例中的属性，您使用的 div 元素将位于同一行，而不是每个元素都从新行开始。

#layer1,
#layer2 {
    display: inline-block;
}
于 2013-08-07T02:40:50.317 回答