如何使用CSS从左到右平滑显示div？

时间：2017-02-16 11:04:17

标签： html css html5 css3

  

我尝试了所有问题＆amp;与此主题相关的答案。此外，我尝试了相关的问题，并尝试解决它，但没有成功。所以请仔细阅读我的问题。

我想

  • 点击右侧->箭头，然后 Viewer Dox div应该非常顺利地显示和隐藏。

  • 如果div打开，则应该从右向左移动并div隐藏，然后仅使用CSS将从左向右移动。

Fiddle Code

代码段

/* Body Css */
body {
    margin: 0;
    width:100%;
    height: 100%;
    background: #fff repeat scroll 0% 0%;
    position: relative;
    font-family: Roboto,Arial, Helvetica, sans-serif sans-serif;
}
/* Main Home Wrapper*/
.MainHomeWrapper{
   width:100%;
   height: 100%;
   max-width: 100%;
   display: inline-block;
    position: relative;
}
/***************************************** Header Start ********************************/
/* Header & Main Content*/
.clsHeader,.clsContent {
    width: 100%;
    min-height: 40px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    float: left;
    position: relative;
    /*border: 1px dotted black;*/
}
/* inside a all div in Header assign inline*/
.clsHeader > div ,.clsContent > div{
    float: left;
    border: 1px solid black;
    box-sizing: border-box;
    min-height: 81px;
}
.clsHeader > div {
    min-height: 75px;
}
.clsContent > div{
    min-height: 725px;
}
/* Header Logo Wrapper*/
.clsHedLogo{
    width: 10%;

}
/* Header Middle Wrapper or Content*/
.clsHedMidContent{
    width: 70%;
}
/* Header Logout Wrapper*/
.clsHedLogout{
    width: 20%;
}

/***************************************** Header End ********************************/

/***************************************** Content Start ********************************/

/**********  Fix Left Menu Start ***********/
 /* Main left Content  */
.clsFixLeftCont{
    width: 6%;
    background-color: #f5821f;
    box-sizing: border-box;
}
.clsFixLeftCont > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clsFixLeftCont ul li{
    box-sizing: border-box;
}
.clsFixLeftMenublock{
    padding: 15px;
    text-align: center;
    font-size: 30px;
    height: 30px;
    cursor: pointer;
    color: #FFF;
}
.clsFixLeftMenublock > .fa {
    padding-top: 7px;
}
/**********  Fix Left Menu End ***********/


/**********  Middle Content Start ***********/
/* Main Middle Content  */
.clsMidcont{
    width: 48%;
    box-sizing: border-box;
}
.clsMidcont > div {
    box-sizing: border-box;
}
.clsSearchWrapper{
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border-bottom: 1px solid black;
}
.clsBreadCrumbsWrapper{
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border-bottom: 1px solid black;
}
.clsListingWrapper{
    width: 100%;
    min-height: 623px;
    padding-top: 10px;
    border-bottom: 1px solid black;
}
/**********  Middle Content End ***********/



/**********  Right Content Start ***********/
/* Main right Content  */
.clsrightcont{
    width:44%;
}
/**********  Right Content End ***********/

/********** Fix Right Menu Start ***********/
.clsFixRightcont{
    width: 10%;
    background-color: #f5821f;
    box-sizing: border-box;
    position: absolute;
    right: 0;
}
.clsFixRightcont > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clsFixRightcont ul li{
    box-sizing: border-box;
}
.clsFixRightMenublock{
    padding: 2px;
    text-align: center;
    font-size: 17px;
    height: 50px;
    cursor: pointer;
    color: #FFF;
}
.clsFixRightMenublock > .fa {
    padding-top: 7px;
}
/********** Fix Right Menu End ***********/
/***************************************** Content End ********************************/

input:checked ~ .clsrightcont { display: none;  }
input:checked ~ .clsMidcont {
    width:92%;
}


label {
    /*background-color: yellow;*/
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
    float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="MainHomeWrapper">
    <div class="clsHeader">
        <div class="clsHedLogo padding-5">
logo
        </div>
        <div class="clsHedMidContent padding-5">
midd
        </div>
        <div class="clsHedLogout padding-5">
logout
        </div>
    </div>
    <div class="clsContent">
        <input type='checkbox' class="ss" style='display: none' id=cb>
        <div class="clsFixLeftCont">
        
        </div>
        <div class="clsMidcont">
            <div class="clsSearchWrapper text-center">
                <span>Search Box</span>
            </div>
            <div class="clsBreadCrumbsWrapper text-center">
                <span> Bread Crumbs Box</span>
            </div>
            <div class="clsListingWrapper text-center">
                <span > Listing Box</span>
            </div>
         </div>
        <div class="clsrightcont">
            <h3 class="text-center"> Viewer Dox</h3>
        </div>
        <div class="clsFixRightcont">
            <!--Click Here-->
            <ul>
                <li>
                    <div class="clsFixRightMenublock">
                        <!--<i class="fa fa-arrow-left" aria-hidden="true"></i>-->
                        <label for=cb><i class="fa fa-arrow-right" aria-hidden="true"></i></label>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <label for=cb> <i class="fa fa-home" aria-hidden="true"></i></label>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-bank" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-address-card-o" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-bank" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-tasks" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>

1 个答案:

答案 0 :(得分：2)

您正在寻找这种行为吗？

＆＃13;
＆＃13; 
/* Body Css */
body {
    margin: 0;
    width:100%;
    height: 100%;
    background: #fff repeat scroll 0% 0%;
    position: relative;
    font-family: Roboto,Arial, Helvetica, sans-serif sans-serif;
}
/* Main Home Wrapper*/
.MainHomeWrapper{
   width:100%;
   height: 100%;
   max-width: 100%;
   display: inline-block;
    position: relative;
}
/***************************************** Header Start ********************************/
/* Header & Main Content*/
.clsContent {
    overflow: hidden;
}
.clsHeader,.clsContent {
    width: 100%;
    min-height: 40px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    float: left;
    position: relative;
    /*border: 1px dotted black;*/
}
/* inside a all div in Header assign inline*/
.clsHeader > div ,.clsContent > div{
    float: left;
    border: 1px solid black;
    box-sizing: border-box;
    min-height: 81px;
}
.clsHeader > div {
    min-height: 75px;
}
.clsContent > div{
    min-height: 725px;
}
/* Header Logo Wrapper*/
.clsHedLogo{
    width: 10%;

}
/* Header Middle Wrapper or Content*/
.clsHedMidContent{
    width: 70%;
}
/* Header Logout Wrapper*/
.clsHedLogout{
    width: 20%;
}

/***************************************** Header End ********************************/

/***************************************** Content Start ********************************/

/**********  Fix Left Menu Start ***********/
 /* Main left Content  */
.clsFixLeftCont{
    width: 6%;
    background-color: #f5821f;
    box-sizing: border-box;
}
.clsFixLeftCont > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clsFixLeftCont ul li{
    box-sizing: border-box;
}
.clsFixLeftMenublock{
    padding: 15px;
    text-align: center;
    font-size: 30px;
    height: 30px;
    cursor: pointer;
    color: #FFF;
}
.clsFixLeftMenublock > .fa {
    padding-top: 7px;
}
/**********  Fix Left Menu End ***********/


/**********  Middle Content Start ***********/
/* Main Middle Content  */
.clsMidcont{
    width: 48%;
    box-sizing: border-box;
    transition: width .6s;
}
.clsMidcont > div {
    box-sizing: border-box;
}
.clsSearchWrapper{
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border-bottom: 1px solid black;
}
.clsBreadCrumbsWrapper{
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border-bottom: 1px solid black;
}
.clsListingWrapper{
    width: 100%;
    min-height: 623px;
    padding-top: 10px;
    border-bottom: 1px solid black;
}
/**********  Middle Content End ***********/


/**********  Right Content Start ***********/
/* Main right Content  */
.clsrightcont{
    width:44%;
    transition: width .6s;
}
/**********  Right Content End ***********/

/********** Fix Right Menu Start ***********/
.clsFixRightcont{
    width: 10%;
    background-color: #f5821f;
    box-sizing: border-box;
    position: absolute;
    right: 0;
}
.clsFixRightcont > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clsFixRightcont ul li{
    box-sizing: border-box;
}
.clsFixRightMenublock{
    padding: 2px;
    text-align: center;
    font-size: 17px;
    height: 50px;
    cursor: pointer;
    color: #FFF;
}
.clsFixRightMenublock > .fa {
    padding-top: 7px;
}
/********** Fix Right Menu End ***********/
/***************************************** Content End ********************************/

input:checked ~ .clsrightcont { width: 0%  }
input:checked ~ .clsMidcont {
    width:92%;
}


label {
    /*background-color: yellow;*/
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
    float: right;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="MainHomeWrapper">
    <div class="clsHeader">
        <div class="clsHedLogo padding-5">
logo
        </div>
        <div class="clsHedMidContent padding-5">
midd
        </div>
        <div class="clsHedLogout padding-5">
logout
        </div>
    </div>
    <div class="clsContent">
        <input type='checkbox' class="ss" style='display: none' id=cb>
        <div class="clsFixLeftCont">
        
        </div>
        <div class="clsMidcont">
            <div class="clsSearchWrapper text-center">
                <span>Search Box</span>
            </div>
            <div class="clsBreadCrumbsWrapper text-center">
                <span> Bread Crumbs Box</span>
            </div>
            <div class="clsListingWrapper text-center">
                <span > Listing Box</span>
            </div>
         </div>
        <div class="clsrightcont">
            <h3 class="text-center"> Viewer Dox</h3>
        </div>
        <div class="clsFixRightcont">
            <!--Click Here-->
            <ul>
                <li>
                    <div class="clsFixRightMenublock">
                        <!--<i class="fa fa-arrow-left" aria-hidden="true"></i>-->
                        <label for=cb><i class="fa fa-arrow-right" aria-hidden="true"></i></label>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <label for=cb> <i class="fa fa-home" aria-hidden="true"></i></label>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-bank" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-address-card-o" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-bank" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="clsFixRightMenublock">
                        <i class="fa fa-tasks" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题