css：可以通过css在div之间移动文本吗？

Question

HTML：

<div id="id1"> 
this is my text1. 
</div> 
<div id="id2"> 
this is my text2. 
</div> 

CSS：

<style> 
#id1 { 
    margin: 0 auto; 
    width: 600px; 
    background-color:#00FFCC; 
} 
#id2 { 
    margin: 0 auto; 
    width: 600px; 
    background-color:#FFCCCC; 

} 
</style> 

在前面，它表明：

this is my text1. (green background) 
this is my text2. (pink background) 

现在，如果我想让它显示是这样的：

this is my text1.         this is my text2. (green background) 
empty in pink background 

所以如果不改变html代码，是否有可能通过CSS来实现？基本上我想要做的是移动文本：this is my text2.到第一个div：<div id="id1"></div>

Answer 1

CSS允许改变样式，但不是内容：在div之间移动文本是不可能的与CSS。

您应该检查其他技术，如XSLT。

Answer 2

CSS只是样式化html元素的一种方式。你不能通过CSS操作元素的内容，只能显示它的显示方式。可能有一种方法可以使其“看起来”出现这种行为，但内容始终位于原来的div中。使用javascript，这将更容易完成。

Answer 3

如果你想从这个移动：

<div id="id1"> 
this is my text1. 
</div> 
<div id="id2"> 
this is my text2. 
</div> 

这样：

<div id="id1"> 
this is my text1. 
this is my text2. 
</div> 
<div id="id2"> 
</div> 

也许你可以使用JavaScript？我不认为只有在CSS中才有可能，因为在这里通过将文本从一个div移动到另一个div来编辑html。

但你可以通过CSS定位来移动第二个div，使用悬停事件或类似的东西。但是，这只是改变它的外观，但文本仍然会在第二格。

这可能是这样的例如：http://jsfiddle.net/yNCk4/4/ 不是最好的想法，只是显示出它是如何可能的。

HTML

<div id="id1"> 
this is my text1. 
</div> 
<div id="id2"> 
    <div class="text">this is my text2.</div> 
</div> 

CSS

.text:hover { 
    position:fixed; 
    top:0; 
    right:0px; 
    margin 0; 
} 

所以，你想要做什么？

Answer 4

正如我所看到的那样，您实际上无法仅通过CSS来移动dom中的内容。但是你总是可以定位div，以便获得相同的效果。

Answer 5

这里是JSBin，下面添加CSS：

#id1:after { 
    content:'this is my text2'; 
    margin-right:0px; 
    float:right; 
    background-color:#FFCCCC; 
} 

Answer 6

也许你可以做某事像：

#id1:hoover{ 
visibility: hidden; 

} 
#id2:after { 
    content:'this is my text1. this is my text2.'; 
    visibility: visible; 
} 

一些动作胡佛或部分JS的线索是内容：改变div的文本我帮助它。