div 如何仅使用 CSS 从左到右流畅地显示?

Question

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

我想

• 单击右侧->箭头，然后查看器Doxdiv应该非常流畅地显示和隐藏。

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

小提琴代码

代码片段

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

Answer 1

这是您要查找的行为吗？

/* 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;
}

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