带有媒体屏幕的中心扩展 div
[英]center expanded div with media screen
问题描述
i am trying align the expanded card div to the center, when the media screen max-width 992px/768px
我正在尝试将扩展卡 div 对齐到中心，当媒体屏幕最大宽度为 992px/768px
At the moment when i expand the div the expanded div is not centered.在我展开 div 的那一刻，展开的 div 没有居中。
What flex property should i use here?我应该在这里使用什么 flex 属性？ if so,how?如果是这样，怎么办？
Here a demo of how the grid layout shifts and the cards next to the expanded div misaligned.这里演示了网格布局如何变化以及扩展 div 旁边的卡片未对齐。
You will need to view in full window / resize the window to see it change size您需要完整查看 window / 调整 window 的大小以查看其大小
var $cell = $('.card'); //open and close card when clicked on card $cell.find('.js-expander').click(function() { var $thisCell = $(this).closest('.card'); if ($thisCell.hasClass('is-collapsed')) { $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive'); $thisCell.removeClass('is-collapsed').addClass('is-expanded'); if ($cell.not($thisCell).hasClass('is-inactive')) { //do nothing } else { $cell.not($thisCell).addClass('is-inactive'); } } else { $thisCell.removeClass('is-expanded').addClass('is-collapsed'); $cell.not($thisCell).removeClass('is-inactive'); } }); //close card when click on cross $cell.find('.js-collapser').click(function() { var $thisCell = $(this).closest('.card'); $thisCell.removeClass('is-expanded').addClass('is-collapsed'); $cell.not($thisCell).removeClass('is-inactive'); });
@charset "UTF-8"; * { box-sizing: border-box; } body { background: #eceef1; font-family: "Slabo 27px", serif; color: #333a45; }.wrapper { margin: 5em auto; max-width: 1000px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }.header { padding: 30px 30px 0; text-align: center; }.header__title { margin: 0; text-transform: uppercase; font-size: 2.5em; font-weight: 500; line-height: 1.1; }.header__subtitle { margin: 0; font-size: 1.5em; color: #949fb0; font-family: "Yesteryear", cursive; font-weight: 500; line-height: 1.1; }.cards { padding: 15px; display: flex; flex-flow: row wrap; justify-content: center; }.card { margin: 15px; width: calc((100% / 3) - 30px); transition: all 0.2s ease-in-out; } @media screen and (max-width: 991px) {.card { width: calc((100% / 2) - 30px); } } @media screen and (max-width: 767px) {.card { width: 100%; } }.card:hover.card__inner { background-color: #1abc9c; transform: scale(1.05); }.card__inner { width: 100%; padding: 30px; position: relative; cursor: pointer; background-color: #949fb0; color: #eceef1; font-size: 1.5em; text-transform: uppercase; text-align: center; transition: all 0.2s ease-in-out; }.card__inner:after { transition: all 0.3s ease-in-out; }.card__inner.fa { width: 100%; margin-top: 0.25em; }.card__expander { transition: all 0.2s ease-in-out; background-color: #333a45; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; text-transform: uppercase; color: #eceef1; font-size: 1.5em; }.card__expander.fa { font-size: 0.75em; position: absolute; top: 10px; right: 10px; cursor: pointer; }.card__expander.fa:hover { opacity: 0.9; }.card.is-collapsed.card__inner:after { content: ""; opacity: 0; }.card.is-collapsed.card__expander { max-height: 0; min-height: 0; overflow: hidden; margin-top: 0; opacity: 0; }.card.is-expanded.card__inner { background-color: #1abc9c; }.card.is-expanded.card__inner:after { content: ""; opacity: 1; display: block; height: 0; width: 0; position: absolute; bottom: -30px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #333a45; }.card.is-expanded.card__inner.fa:before { content: ""; }.card.is-expanded.card__expander { max-height: 1000px; min-height: 200px; overflow: visible; margin-top: 30px; opacity: 1; }.card.is-expanded:hover.card__inner { transform: scale(1); }.card.is-inactive.card__inner { pointer-events: none; opacity: 0.5; }.card.is-inactive:hover.card__inner { background-color: #949fb0; transform: scale(1); } @media screen and (min-width: 992px) {.card__expander { width: 250%; } } @media screen and (min-width: 768px) and (max-width: 991px) {.card__expander { width: 150%; } }
<:DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Expanding Card Grid With Flexbox</title> <link rel='stylesheet' href='https.//fonts.googleapis?com/css:family=Slabo+27px|Yesteryear'> <link rel='stylesheet' href='https.//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style:css"> </head> <body> <.-- partial.index:partial.html --> <div class="wrapper"> <div class="header"> <h1 class="header__title">Expanding Card Grid</h1> <h2 class="header__subtitle">with Flexbox</h2> </div> <div class="cards"> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> </div> </div> <.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2021-11-26 12:24:31
This is difficult because each card_expander is linked to its parent card and its position depends on it.这很困难，因为每个card_expander都链接到它的父card ，并且它的 position 依赖于它。 If you center card_expander , it will be centered relative to its parent and not to the page.如果您居中card_expander ，它将相对于其父级而不是页面居中。
One solution would be to adjust the position of each card_expander .一种解决方案是调整each card_expander 。
var $cell = $('.card'); //open and close card when clicked on card $cell.find('.js-expander').click(function() { var $thisCell = $(this).closest('.card'); if ($thisCell.hasClass('is-collapsed')) { $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive'); $thisCell.removeClass('is-collapsed').addClass('is-expanded'); if ($cell.not($thisCell).hasClass('is-inactive')) { //do nothing } else { $cell.not($thisCell).addClass('is-inactive'); } } else { $thisCell.removeClass('is-expanded').addClass('is-collapsed'); $cell.not($thisCell).removeClass('is-inactive'); } }); //close card when click on cross $cell.find('.js-collapser').click(function() { var $thisCell = $(this).closest('.card'); $thisCell.removeClass('is-expanded').addClass('is-collapsed'); $cell.not($thisCell).removeClass('is-inactive'); });
@charset "UTF-8"; * { box-sizing: border-box; } body { background: #eceef1; font-family: "Slabo 27px", serif; color: #333a45; }.wrapper { margin: 5em auto; max-width: 1000px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06); }.header { padding: 30px 30px 0; text-align: center; }.header__title { margin: 0; text-transform: uppercase; font-size: 2.5em; font-weight: 500; line-height: 1.1; }.header__subtitle { margin: 0; font-size: 1.5em; color: #949fb0; font-family: "Yesteryear", cursive; font-weight: 500; line-height: 1.1; }.cards { padding: 15px; display: flex; flex-flow: row wrap; justify-content: center; }.card { margin: 15px; width: calc((100% / 3) - 30px); transition: all 0.2s ease-in-out; /* ---------- HERE ---------- */ display: flex; flex-direction: column; } @media screen and (max-width: 991px) {.card { width: calc((100% / 2) - 30px); } } @media screen and (max-width: 767px) {.card { width: 100%; } }.card:hover.card__inner { background-color: #1abc9c; transform: scale(1.05); }.card__inner { width: 100%; padding: 30px; position: relative; cursor: pointer; background-color: #949fb0; color: #eceef1; font-size: 1.5em; text-transform: uppercase; text-align: center; transition: all 0.2s ease-in-out; }.card__inner:after { transition: all 0.3s ease-in-out; }.card__inner.fa { width: 100%; margin-top: 0.25em; }.card__expander { transition: all 0.2s ease-in-out; background-color: #333a45; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; text-transform: uppercase; color: #eceef1; font-size: 1.5em; } /* ---------- HERE ---------- */ @media screen and (min-width: 768px) {.card:nth-child(odd).card__expander { align-self: start; margin-left: calc(50% - 75px); }.card:nth-child(even).card__expander { align-self: end; margin-right: calc(50% - 75px); } } @media screen and (min-width: 991px) {.card:nth-child(1).card__expander { align-self: start; margin-left: calc(50% - 45px); }.card:nth-child(3).card__expander { align-self: end; margin-right: calc(50% - 45px); }.card:nth-child(even).card__expander { align-self: center; margin: 0; } } /* -------------------------- */.card__expander.fa { font-size: 0.75em; position: absolute; top: 10px; right: 10px; cursor: pointer; }.card__expander.fa:hover { opacity: 0.9; }.card.is-collapsed.card__inner:after { content: ""; opacity: 0; }.card.is-collapsed.card__expander { max-height: 0; min-height: 0; overflow: hidden; margin-top: 0; opacity: 0; }.card.is-expanded.card__inner { background-color: #1abc9c; }.card.is-expanded.card__inner:after { content: ""; opacity: 1; display: block; height: 0; width: 0; position: absolute; bottom: -30px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #333a45; }.card.is-expanded.card__inner.fa:before { content: ""; }.card.is-expanded.card__expander { max-height: 1000px; min-height: 200px; overflow: visible; margin-top: 30px; opacity: 1; }.card.is-expanded:hover.card__inner { transform: scale(1); }.card.is-inactive.card__inner { pointer-events: none; opacity: 0.5; }.card.is-inactive:hover.card__inner { background-color: #949fb0; transform: scale(1); } @media screen and (min-width: 992px) {.card__expander { width: 250%; } } @media screen and (min-width: 768px) and (max-width: 991px) {.card__expander { width: 150%; } }
<:DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Expanding Card Grid With Flexbox</title> <link rel='stylesheet' href='https.//fonts.googleapis?com/css:family=Slabo+27px|Yesteryear'> <link rel='stylesheet' href='https.//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style:css"> </head> <body> <.-- partial.index:partial.html --> <div class="wrapper"> <div class="header"> <h1 class="header__title">Expanding Card Grid</h1> <h2 class="header__subtitle">with Flexbox</h2> </div> <div class="cards"> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> <div class=" card [ is-collapsed ] "> <div class="card__inner [ js-expander ]"> <span>Card</span> <i class="fa fa-folder-o"></i> </div> <div class="card__expander"> <i class="fa fa-close [ js-collapser ]"></i> Expander </div> </div> </div> </div> <.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在屏幕上居中显示动态<div> - Center a dynamic <div> on screen
JS - 中央屏幕上的 Div - JS - Div on center screen
定位<div>屏幕中心的元素 - Positioning <div> element at center of screen
有画面时在萤幕中心显示Div？ - Div in screen center when there are frames?
在屏幕左侧居中div - Center a div on the left side of the screen
如何将div放在屏幕中央？ - How to position div in the center of the screen?
使用 jQuery 将 DIV 在屏幕上居中 - Using jQuery to center a DIV on the screen
单击滚动到div（在中心屏幕上显示div） - Scroll to div on click (show div on center screen)
如何找到当前位于屏幕中央的div - How to find the div which is currently at the center of the screen
从iframe将div弹出窗口居中显示在屏幕上 - center a div popup on the screen from iframe
相关标签