Question

基本上，我有一个宽度为100％的父div，以及每个宽度为33.333333％的3个子div。所有3个div都向左浮动，因此它们排成一行。

我想将33.333333％div中的一个设置为100％，但我想要它做的是在没有被推到下一行的情况下检查其他2个div？

<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>

我该怎么做？

参见此处的示例：

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

Answer 1

＆＃13;

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

＆＃13;

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%;}

＆＃13;

<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>

＆＃13;

如果启用左侧浮动，如何为其他div设置div动画？

1 个答案: