Question

假设我有两个div，一个叫div A，另一个叫div B.

现在，div B必须具有div A的确切内容，因此每次更改A中的内容时，我都必须手动将内容从A复制并粘贴到B ...

有没有办法可以使用CSS来提供div B中的div B？

示例：

<!--Contact Details Section-->
                    <div id="contactDetails">

                        <div id="contactDetails-normal">
                            <h3>Contact Details</h3>
                            <p><strong>Email:</strong> email@websitename.com</p>
                            <p><strong>Telephone:</strong> 020 8202 9767</p>
                        </div>

                        <!--Phone contact buttons-->
                        <div class="hidden" id="contactDetails-smart">
                            <a href="tel:020 8202 9767">Call us: 020 8202 9767</a>
                                <br>
                            <p><strong>Email:</strong> email@websitename.com</p>
                        </div>
                        <br>

正如您在上面所看到的，我有两个div，一个是contactDetails-normal和contactDetails-smart ...每个都将显示在不同大小的屏幕上。但两者都会有相同的信息...

Answer 1

使用CSS无法实现这一点，如果您希望这种情况发生，则需要使用Javascript，例如：在jQuery中你可以使用：

$( "#div2" ).html($( "#div1" ).html(););

或者，如果您只想复制文字内容，请使用text()

Answer 2

基于对问题的编辑，我建议使用css媒体查询根据屏幕大小不同地设置一个元素的样式，而不是重复的HTML和额外的javascript。

HTML

<div id="contactDetails">
  <h3>Contact Details</h3>
  <p><strong>Email:</strong> email@websitename.com</p>
  <p class="tel"><strong>Telephone:</strong> 0000000</p>
  <p class="sms"><strong>SMS:</strong> 0000000</p>
</div>

CSS

#contactDetails {
    //Styling for large screen size
}

@media screen and (max-width: 400px) {

  #contactDetails {
      //Styling for screen size smaller than 400px
  }

}

如果您希望contactDetails中的元素仅在较小的屏幕尺寸上可见，您也可以在媒体查询中解决它们（注意：我已将相关的类添加到上面的html中。）

CSS

#contactDetails .tel, #contactDetails .sms {
    display:none;
}

@media screen and (max-width: 400px) {

  #contactDetails .tel, #contactDetails .sms {
      display:inline;
  }

}

如果您使用此功能，请注意旧版浏览器并不总是支持媒体查询，您可能需要使用像response.js这样的内容来帮助他们https://github.com/scottjehl/Respond

Answer 3

你不能在CSS中这样做，因为CSS不会影响DOM树。

相反，您可以使用一些jQuery脚本来克隆您的div。

以下是jQuery docs的演示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<b>Hello</b><p>, how are you?</p>

<script>
$( "b" ).clone().prependTo( "p" );
</script>

</body>
</html>

http://api.jquery.com/clone/

Answer 4

你不能用CSS做到这一点。

但你可以使用jquery轻松完成这项工作：

$(function() {        
    $("#B").html($("#A").html());    
 });

这将简单地将A div中的所有html代码复制到B div。

示范：http://jsfiddle.net/e9GBn/1/

Answer 5

试试这个javascript：

document.getElementById("div2").appendChild(
    document.getElementById('"div1"')
  );

自动将内容从div移动到另一个

5 个答案: