Question

简单的问题，有很多细微差别，因为我在去的时候拿起jQuery ......

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="script.js"></script>

</head>
<body>
    <div id="container">
        <div id="header">
        </div>
        <div id="body">
            <div id="flip_body">
                <div id="top_body">
                        <div id="top_body_left">
                        <p id="text">This will be a really long string to test if things get squished</p>
                        <div id="left_test" class="test">
                        </div>
                        <div id="right_test" class="test">
                        </div>
                    </div>
                    <div id="top_body_right">
                    </div>
                </div>
                <div id="bottom_body">
                </div>
            </div>
            <div id="flip">
                <p>Flip</p>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
<html>

CSS：

#container
{
    width:1000px;
    height:600px;
    background-color:red;
}
#header
{
    width:100%;
    height:15%;
    background-color:orange;
}
#body
{
    width:100%;
    height:70%;
    background-color:yellow;
}
#top_body
{
    width:100%;
    height:100%;
    background-color:red;

}
#bottom_body
{
    width:100%;
    height:100%;
    background-color:pink;
    display:none;

}
#flip_body
{
    width:90%;
    height:100%;
    float:left;
    position:relative;
}
#flip
{
    width:10%;
    height:100%;
    float:left;
    background-color:green;
}
#top_body_left
{
    height:100%;
    float:left;
    background-color:teal;
    position:absolute;
    left:0px;
    top:0px;
    bottom: 0px;
    width: 250px;
}
#top_body_right
{   
    height:100%;
    float:left;
    background-color:black;
    position:absolute;
    left:300px;
    top:0px;
    bottom: 0px;
    width: 200px;
}
#text
{
    overflow:hidden;
}
#left_test
{
    background-color:orange;

}
#right_test
{
    background-color:red;
    width:150px;
}
.test
{
    width:100px;
    height:100px;
    float:left;
}
#footer
{
    width:100%;
    height:15%;
    background-color:blue;
}

jQuery的：

$(document).ready(function(){  
    $("#flip").data("open", false);

    $("#flip").click(function() {
        // slide to the right
        if ($(this).data("open") == false) {            
            $("#top_body_left").animate({width:'toggle'},500);
            $("#top_body_right").animate({width: '+=100', duration:500});

            $(this).data("open", true);
        }
        // slide to the left
        else {
                $("#top_body_left").animate({width:'toggle'},500);
            $("#top_body_right").animate({width:'-=100'},500);

            $(this).data("open", false);
        }
    });

});

如何阻止#top_body_left div更改子女的安排（#left_test和#right_test）？有没有办法切换没有浮动移动或任何内容被包裹？我读到了使用css剪辑，但我不确定这是我需要的。

Answer 1

我认为您需要将内容封装在另一个容器中并将overflow：hidden添加到内部容器中（对于您想要挤压的每个块），然后挤压外部容器。

Answer 2

要看的小提琴。 http://jsfiddle.net/mrtsherman/4PG7w/

浮动左侧元素将从左到右填充其容器。如果它们不适合那么它们将换成新的线。您可以将它们放在一个overflow: hidden的容器中。这可以防止它们缠绕。

示例小提琴 - http://jsfiddle.net/mrtsherman/4PG7w/1/

jQuery animate squishes内容？

2 个答案: