1

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实现？基本上我想要做的是将 text: 移动this is my text2.到第一个 div：<div id="id1"></div>

4

6 回答 6

5

CSS 允许更改样式，但不允许更改内容：使用 CSS 无法在 div 之间移动文本。

您应该为此检查 XSLT 等其他技术。

于 2013-08-07T06:44:46.977 回答
2

这是JSBin，在 CSS 下面添加：

#id1:after {
  content:'this is my text2'; 
  margin-right:0px;
  float:right;
  background-color:#FFCCCC;
}
于 2013-08-07T06:53:18.370 回答
0

CSS 只是样式化 html 元素的一种方式。您不能通过 CSS 操作元素的内容，只能操作它的显示方式。可能有一种方法可以使它“看起来”具有这种行为，但内容将始终位于它们最初所在的 div 中。使用 javascript，这将更容易实现。

于 2013-08-07T06:45:26.620 回答
0

如果你想从这里移动：

<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。但这只是改变它的外观，但文本仍将位于第二个 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;
}

那你想做什么？

于 2013-08-07T06:48:10.553 回答
0

正如我所看到的，您实际上不能仅使用 css 在 dom 中移动内容。但是您始终可以定位 div，以便获得相同的效果。

于 2013-08-07T06:49:07.257 回答
0

也许你可以这样做：

#id1:hoover{
visibility: hidden;

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

通过一些动作胡佛或一些js，线索是内容：改变div的文本我希望它有所帮助。

于 2013-08-07T06:58:57.533 回答