Question

我试过这些代码。这是HTML代码。

<div id="body">
  <div id="back_1"></div>
  <div id="back_2"></div>
</div>

现在我需要转换back_1和back_2 divs最大宽度body div。我这样用。 transform:translate(100%)，但它不起作用。它不会转换body div的最大宽度。我怎样才能改变（移动整个孩子的潜水）div？

Answer 1

我已经创建了2个DIV以便更好地理解。

<强> HTML

<div id="body">
    <p>DEMO 1 (Flexible width)</p>
    <div id="back_1"></div>
    <div id="back_2"></div>
</div>

<div id="body1">
    <p>DEMO 2 (fixed width of parent DIV)</p>
    <div id="back_11"></div>
    <div id="back_21"></div>
</div>

<强> CSS

body{ color: #fff; }

#body {
    width: auto;
    background: red;
    height: auto;
    padding: 10px;
}
#back_1, #back_2 {
    background: yellow;
    width: inherit;
    height: 50px;
    border: 5px solid #fff;
}

#body1 {
    width: 300px;
    background: green;
    height: auto;
    padding: 10px;
    margin-top: 10px;
}
#back_11{ margin-bottom: 10px; }
#back_11, #back_21 {
    background: grey;
    width: inherit;
    height: 50px;
}

DEMO：SEE IN ACTION

DEMO1：Added On Hover代表#body DIV的第一个DIV。

Answer 2

您的观点研究此地址

http://www.w3schools.com/cssref/css3_pr_transform.asp

例如

 <style>

 #body{
  border:1px solid red;
  height:500px;
 }


  #body div{
        background-color: blue;
        width: 500px;
       height: 40px;
       /*General*/
        transform:translate(200px, 0px);
        /*Firefox*/
       -moz-transform:translate(200px, 0px);
      /*Microsoft Internet Explorer*/
      -ms-transform:translate(200px, 0px);
        /*Chrome, Safari*/
       -webkit-transform:translate(200px, 0px);
      /*Opera*/
      -o-transform:translate(200px, 0px);
        border:1px soldi red;
       transition:all 0.5s linear;
      float:left;
       margin:5px;
      padding:10px;

   }
    #body:hover div{
        /*General*/
     transform:translate(100px, 50px);
   /*Firefox*/
    -moz-transform:translate(100px, 50px);
    /*Microsoft Internet Explorer*/
    -ms-transform:translate(100px, 50px);
   /*Chrome, Safari*/
    -webkit-transform:translate(100px, 50px);
    /*Opera*/
    -o-transform:translate(100px, 50px);
     transition:all 0.5s linear;
     margin:80px;
    padding:80px;
   }

 </style>

 <body>

   <div id="body" >
      <div id="back1"></div>
      <div id="back2"></div>
   </div>

</body>

Answer 3

您可以使用它来开始作为示例：

<style>
        #body
        {
            background: gray;
            width: 400px;
        }

        #back_1, #back_2
        {
            background: red;
            position: relative;
            width: 200px;
            -moz-transition: .5s;
            -webkit-transition: .5s;
            -ms-transition: .5s;
            -o-transition: .5s;
            cursor: pointer;
        }

        #back_1:hover, #back_2:hover
        {
            width: 100%;
        }
    </style>

    <div id="body">
        <div id="back_1">Back1</div>
        <div id="back_2">Back2</div>
    </div>

编辑:::使用jQuery和jQueryUI

<style>
    #body
    {
        position: relative;
        width: 200px;
        background: gray;
        height: 100px;
        max-width: 400px;
    }

    #back_1
    {
        position: absolute;
        width: 100px;
        background: red;
        height: 10px;
        left: 0px;
    }   
</style>

<script src="jquery.js"></script> <!-- Your jQuery reference -->
<script src="jqueryUI.js"></script> <!-- Your jQuery UI reference -->

<script>
    $(document).ready(function() {
        $("#body").mouseover(function() {
            var maxWidth = $("#body").css("max-width");
            $("#back_1").animate({ left: maxWidth });
        });

        $("#body").mouseleave(function() {
            $("#back_1").animate({ left: 0 });
        });
    });
</script>

<div id="body">
    <div id="back_1"></div>
    <div id="back_2"></div>
</div>

Answer 4

根据您的澄清，您似乎正在尝试将父级中的子div移动到父级的边缘。

您从transform: translate(100%)开始。

一个问题是您必须指定要转移的轴。在你的情况下的x轴，因此它应该是translateX。

另一个问题是100%中的translate与CSS中通常的百分比单位不同。 CSS百分比单位取决于父单位，即父亲宽度/高度等的x％。translate(100%)表示正在翻译的元素的100％。

因此，在您的情况下，您必须仔细确定父宽度（.body div），它应该是子宽度的倍数。例如如果父母是100％，而孩子是50％，那么translate(100%)会将孩子再翻译50％，从而达到父母的边缘。

这个演示将更清楚：

演示：http://jsfiddle.net/abhitalks/Ze9cu/1/

相关CSS ：

#body {
    width: 100%;
    height: 200px;
}
#back_2 {
    width: 25%;
}
#back_2:hover {
    -webkit-transform: translateX(300%);
}

在这里，孩子占其父母的25％。因此translateX(100%)将沿x轴移动仅25％。使它translateX(300%)将使其移动自己宽度的3倍。

如何用css转换（移动整个孩子潜水）div到最大宽度？

4 个答案: