如果启用了向左浮动，如何在其他div上为div设置动画？

Question

Basically, I have a parent div with a width of 100%, and 3 sub-divs with a width of 33.333333% each. All 3 divs are floated left so they align in one row.

I want to animate one of the 33.333333% div to 100% but what I want it to do is to go over the other 2 divs without it being pushed to the next row?

<div id="fullwidth">
    <div id="history" class="thirdwidth">
        <h1>Our History</h1>
    </div>
    <div id="now" class="thirdwidth">
        <h1>Now</h1>
    </div>
    <div id="whatwedo" class="thirdwidth">
        <h1>What We Do</h1>
    </div>
</div>

How do I do this?

See example here:

https://jsfiddle.net/y9qcd2wc/2/

Answer 1

 $(".thirdwidth").on("click", function(){ $(this).toggleClass("active"); }); 

 html, body{margin:0; height:100%;} .thirdwidth { position:absolute; z-index:0; top:0; width: 33.333%; height: 100%; transition: 0.4s; -webkit-transition: 0.4s; } .thirdwidth.push0{left:0%;} .thirdwidth.push1{left:33.333%;} .thirdwidth.push2{left:66.333%;} #history {background:red;} #now {background:green;} #whatwedo{background:blue;} .thirdwidth.active{z-index:1; left:0; width:100%;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fullwidth"> <div id="history" class="thirdwidth push0"> <h1>Our History</h1> click to maximize, and click again to minimize </div> <div id="now" class="thirdwidth push1"> <h1>Now</h1> </div> <div id="whatwedo" class="thirdwidth push2"> <h1>What We Do</h1> </div> </div>