是否可以纯粹通过CSS将内容从一个div移动到另一个div？

Question

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>

问题

如果不更改此HTML的结构，只更改CSS代码，是否可以将内容从一个div移动到另一个？我想将文本“这是第一个div。”移动到 layer2 ，以生成文本：“这是第一个div。”显示在 layer2 的左侧，并生成文本：“这是第二个div。”显示在 layer2

Answer 1

您的问题很容易理解您的要求所以有些人说没有javascript就不可能。但据我所知，您的问题是将float: left;设置为＃layer1，如果可能的话，请设置为＃layer2

  

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

#layer1, #layer2{
float: left;
}

如果可能这样使用float：left; to＃layer2 and float：right;到＃layer1

  

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

#layer2{
float: left;
}
#layer1{
float: right;
}

Answer 2

您可以使用CSS3 content属性。但是，不推荐这样做，因为它使您的代码看起来很好，非常奇怪。您可以手动移动内容，但不会有任何区别。除非我不明白你在说什么，在这种情况下，请澄清。如果你想让它响应，那么只需使用Javascript。

Answer 3

如果你的意思是你希望元素像这样出现......

  

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

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

  

这是第一个div。

     

这是第二个div。

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

#layer1,
#layer2 {
    display: inline-block;
}

Answer 4

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

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