如何在父div中滑动左浮点div，当左div为hiiden时，也将右div宽度设为100％ [英] How to slide left float div inside parent div also making the right div width to 100% when left div is hiiden

问题描述

嗨

i在主div内有2个div。



设置为：

 <   div  >  ---主要容器
 <   div  >  ---显示：无页面加载宽度的搜索面板：0 
 <   / div  >  
 
 <  < span class =code-leadattribute> div  >  ----页面加载宽度的主要内容持有者：100％
 <   / div  >  
 <   / div  >  

我想显示：按下按钮点击滑动css。

同时更改主要内容div宽度。



任何人请帮助



我的尝试：

 .page {
 margin：0; 
宽度：100％; 
身高：100vh; 
} 
 .page.maincontent {
 float：right; 
宽度：100％; 
 
 
} 
 .page .pagesidebar 
 {
 display：none; 
 float：left; 
宽度：25％; 
溢出：隐藏; 
身高：100％; 
 background-color：＃a4a4a4; 
边框：1px纯黑色; 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
过渡：.6s缓解不透明度，.6s轻松转换; 
} 

解决方案

Quote：

块级元素总是占用可用的全宽度

所以你需要的是改变宽度：100％主要内容为 width：auto 或省略...



编辑小提琴 - JSFiddle [ ^ ]

Hi
i have 2 div inside main div.

with settings as :

<div>---main container
  <div>---display:none for Search panel on page load width:0
  </div>

  <div>----main content holder on page load width:100%
  </div>
</div>

I want to display :as block on button click with the sliding css.
Also changing the main content div width.

Any one please help

What I have tried:

.page{
      margin:0;
      width:100%; 
      height:100vh;  
 }
.page .maincontent{
      float:right;
      width:100%;
      
      
  }
  .page .pagesidebar
 {
    display:none;
    float:left;
    width:25%;
    overflow:hidden;
    height:100%;
 	background-color:#a4a4a4;
     border:1px solid black;
 	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
     transition: .6s ease opacity,.6s ease transform;
   }

解决方案

Quote:

a block-level element always takes up the full width available

So all you need is to change width:100% of main content to width:auto or omit it...

Edit fiddle - JSFiddle[^]

这篇关于如何在父div中滑动左浮点div，当左div为hiiden时，也将右div宽度设为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！