Question

我有以下代码，应该创建一种笔记本开放，

<html>
<style>
    #container
    {
        position:absolute;
        width:570px;
        height:360px;
    }
    inner
    {
        height:360px;
        position: relative;
        float:left;
        width:570px;
    }
    #div1
    {
        background-color:red;
        overflow:hidden;
        height:360px;
        position: relative;
        float:left;
        width:570px;
    }
    #div2
    {
        background-color:yellow;
        overflow:hidden;
        height:360px;
        position: relative;
        float:left;
        width:0px;
    }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var flipped = false;
function flip() {
if (flipped==false)
    {
            $("#div2").animate({
               width: '570px'
            }, { duration: 2000, queue: false });
            $("#div1").animate({
               width: '0px'
            }, { duration: 2000, queue: false });
        flipped=true;
    }
else
    {
        $("#div2").animate({
            width: '0px'
        }, { duration: 2000, queue: false });
        $("#div1").animate({
           width: '570px'
        }, { duration: 2000, queue: false });
        flipped=false;
    }
}
</script>
<body>
    <input type="button" onClick="flip()" value="flip">
    <div id="container">
        <div id="div1">
            <label>Some field:</label><input type="text">
        </div>
        <div id="div2">
            <label>Some other field:</label><input type="text">
        </div>
    </div>
</body>

我希望文本和输入元素在div缩小/展开时不改变位置。这可能吗？

谢谢，

Answer 1

使用white-space: nowrap;

See JSFiddle

当尺寸改变时，保持元素在div内相同

1 个答案: