我有一个3列的图块自适应设计,其中移动设备为1列,桌面为3列,每个图块都有一个内容抽屉,需要扩展屏幕的整个宽度(带有蓝色背景)。
我在下面的笔中有一个工作模型,但是不能让抽屉伸展整个宽度吗?
不知道它是CSS还是在进行移动优先设计时是否有更好的HTML布局,并且它是否有效,只是不在桌面/更宽的视图中。
Codepen:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
function openDrawer(tile) {
var drawer = $(tile).attr("drawer");
if ( $(tile).hasClass("ESGActive") ){ // Already is active?
$(".ESGTile").removeClass("ESGActive");
$("#" + drawer).slideUp();
} else {
// Get all tiles with class="ESGActive" and remove it
$(".ESGTile").removeClass("ESGActive");
// Get all elements with class="ESGDrawer" and hide them
$(".ESGDrawer").slideUp();
// Show the current tab drawer, add "active" class to the button
$("#" + drawer).slideDown();
$(tile).addClass("ESGActive");a
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.ESGTiles > div{
display:inline;
padding:0;
}
.ESGDrawer {
float:left;
margin:0;
}
.ESGTile > img{
display:none;
}
@media screen and (min-width: 1024px){
.ESGTile > img, .FAQTile > img {
display:block;
}
.ESGTiles > div{
padding:15px;
}
}
@media screen and (max-width: 1024px){
.ESGDrawer {
margin-top: 0!important;
padding: 2em 0!important;
}
.FAQTile img, .ESGDrawer img {
display: none;
}
.ESGTile, .FAQTile {
margin: 0.2em 0;
}
span.drawerToggle {
position: relative;
width: 24px!important;
height: 24px!important;
float:right;
}
.call-to-action img {
width: 70%;
margin: 0 auto 2em auto;
}
}
.FAQTile {
background: #36872a!important;
width: 100%;
}
.drawerToggle{
position: relative;
width: 30px;
height: 30px;
float:right;
}
.drawerToggle:before, .drawerToggle:after{
content: "";
position: absolute;
background-color: white;
transition: transform 0.25s ease-out;
}
.drawerToggle:before{
top: -1px;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
}
.drawerToggle:after{
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -2px;
}
/**.ESGTile:hover .drawerToggle:before{ transform: rotate(90deg); }
.ESGTile:hover .drawerToggle:after{ transform: rotate(180deg); }**/
.ESGActive .drawerToggle:before{ transform: rotate(90deg); }
.ESGActive .drawerToggle:after{ transform: rotate(180deg); }
.ESGTile, .FAQTile {
display: block;
position: relative;
cursor: pointer;
overflow: hidden;
background-color: #1f335a;
color: #fff;
z-index: 100;
font-weight: 700;
}
.ESGTile h3, .FAQTile h3 {
color: #fff;
}
.ESGTile:hover {
background-color: #344794;
color: #fff;
text-decoration: none;
}
.FAQTile:hover {
background-color: #00a651!important;
color: #fff;
text-decoration: none;
}
.ESGActive {
background: #344794;
}
.ESGActive:after {
bottom: -3px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
z-index: 120;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.ESGTile h3, .FAQTile h3 {
font-size: 1.2em;
}
.ESGLabel, .FAQLabel {
margin: 0;
display: block;
padding: 0.8em 15px;
}
.ESGDrawer {
display: none;
background: #1f335a;
color: #fff;
padding: 4em 0;
margin-top: 0.3em;
z-index: 90;
position:inline-block;
width:100vw;
left:0;
}
.ESGDrawer h4 {
font-size: 1.8em;
margin-bottom: 1em;
}
.ESGDrawer p {
line-height: 1.4em;
}
.ESGDrawer p.cta-wrapper {
margin: 0.3em 0 0 0;
}
.ESGDrawer p.cta-wrapper a:before {
bottom: 0;
}
.ESGDrawer a:link, .ESGDrawer a:hover, .ESGDrawer a:visited {
text-decoration: none;
color: #fff;
}
hr {
display: none;
}
.call-to-action {
padding: 3em 0;
}
footer {
margin-top: 0;
}
<div class="container">
<div class="row">
<!-- TILE 1 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-1">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 1<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-1" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 1</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<!-- TILE 2 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-2">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 2<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-2" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 2</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<!-- TILE 3 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-3">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 3<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-3" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 3</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
你在这里
我在CSS的末尾添加了此代码
.body {
position: relative;
}
.ESGDrawer {
position: absolute;
top: 247px;
left: 0px;
width: 100%;
}
.x{
position: inherit;
}
我为您的每个
col-xs-12 col-md-4
div添加新的类名在这里检查工作演示
https://codepen.io/anon/pen/JaQPjN
关于html - 响应式固定宽度3列布局,在台式机和移动设备中具有全宽抽屉,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52489279/