Question

我有一个绝对定位的div，它使用left属性进行动画处理。不幸的是，当它击中其父母的一侧时它会回流。 即使右侧被推出父div，我如何强制#child div保持其宽度？

孩子需要保持原始宽度，而不仅仅是固定值。如果文本少于400px，我希望#child收缩到文本。

#parent{
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px dotted black;
}

#child{
    background-color: aliceblue;
    position: absolute;
    top: 0;
    left: 0; /* this animates between 0 and 90% */
    max-width: 400px;
}

Answer 1

而不是

#child {
    max-width: 400px;
}

使用

#child {
    width: 400px;
    max-width: 100%;
}

function to() {
  $('#child').animate({left:'90%'},{duration:2000, done: fro});
}

function fro() {
  $('#child').animate({left:0},{duration:2000, done: to});
}

to();

#parent{
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px dotted black;
}

#child{
    background-color: aliceblue;
    position: absolute;
    top: 0;
    width: 400px;
    max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        Pour-over food truck proident occaecat YOLO, nihil Vice banh mi qui squid kogi. Asymmetrical flexitarian nihil, DIY Wes Anderson heirloom cillum artisan ethical hella drinking vinegar wolf Pinterest voluptate cupidatat. Odio exercitation pariatur freegan, letterpress McSweeney's quinoa qui typewriter seitan retro fanny pack. 90's nostrud, put a bird on it gluten-free irony Banksy cronut readymade High Life. Keytar mlkshk dolor et, quinoa Carles actually stumptown enim church-key qui cronut semiotics synth photo booth. Slow-carb accusamus XOXO, cornhole scenester fingerstache stumptown. Aliquip High Life sartorial Marfa actually.
    </div>
</div>

或者在这种情况下，由于#parent有width: 500px，以下就足够了

#child {
    width: 400px;
}

function to() {
  $('#child').animate({left:'90%'},{duration:2000, done: fro});
}

function fro() {
  $('#child').animate({left:0},{duration:2000, done: to});
}

to();

#parent{
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px dotted black;
}

#child{
    background-color: aliceblue;
    position: absolute;
    top: 0;
    width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        Pour-over food truck proident occaecat YOLO, nihil Vice banh mi qui squid kogi. Asymmetrical flexitarian nihil, DIY Wes Anderson heirloom cillum artisan ethical hella drinking vinegar wolf Pinterest voluptate cupidatat. Odio exercitation pariatur freegan, letterpress McSweeney's quinoa qui typewriter seitan retro fanny pack. 90's nostrud, put a bird on it gluten-free irony Banksy cronut readymade High Life. Keytar mlkshk dolor et, quinoa Carles actually stumptown enim church-key qui cronut semiotics synth photo booth. Slow-carb accusamus XOXO, cornhole scenester fingerstache stumptown. Aliquip High Life sartorial Marfa actually.
    </div>
</div>

在绝对定位的div中防止回流

1 个答案: