将两个 div 包含在单个 div 中答案

【问题标题】：Enclosing two divs within single div将两个 div 包含在单个 div 中
【发布时间】：2014-02-07 17:58:55
【问题描述】：

下面是我的代码，

<html>
<head>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


    <script>
        $(function() {
        $("#image,#image1").draggable();

            $('#clickme').click(function(){

                $("#image,#image1").wrapAll("<div id='newimage'/>");
            });
        });
   </script>
</head>
<body>
    <div id="myimage" style="display:block;border:2px solid green;">
        <div id="image" style="display:block;">
            stack
        </div>
        <div id="image1" style="display:block;">
            is the best
        </div>
    </div>

   <span id="clickme">click me</span>
</body>
</html>

正如您在上面的代码中看到的... div image 和 image1 是可拖动的，当我点击click me 后，这两个 div 将被包含在另一个 id 为 newimage 的 div 中...直到这里它工作正常......但问题在于css样式..我希望“新图像”div同时保存“image”和“image1”......在你的例子中它只保存一个div...... .....应该是这样的......“图像”宽度是50px ..“image1”宽度是50px，它们之间的距离是30px（拖动后）......所以“newimage”的总高度" 应该是 130px...它不应该将 100% 宽度作为 "body" ...如果有人看它.. 他应该知道两者都是 "stack" 和 "is the best" 在同一个块中（新图像） ...

拖动“image”和“image1”div 后，输出应该是这样的......

【问题讨论】：

你需要像改变包装器一样管理css！

标签： javascript jquery html css

【解决方案1】：

我已经对代码进行了更改。 JsFiddle

$(function() {
$("#image,#image1").draggable();

$('#clickme').click(function(){

    $("#image,#image1").wrapAll("<div id='newimage'/>");
    var w1 = $('#image').width();
    var w2= $('#image1').width();
    var pos1 = $('#image').position().left + w1; 
    var pos2 = $('#image1').position().left;
    var diffBtTwo = pos1 > pos2 ? pos1 - pos2 : pos2 - pos1;   
    var total = w1 + w2 + diffBtTwo + 20;
    var height = $('#image').position().top + $('#image1').position().top + 20;     
    $('#newimage').css('height',height);
    $('#newimage').css('width',total);


 });
});

【讨论】：

@Friend 如果您还想要其他任何东西，请提及您的要求
知道了@Chinnu 谢谢...我喜欢你的名字“Chinnu” :)