帶有媒體屏幕的中心擴展 div
[英]center expanded div with media screen
問題描述
我正在嘗試將擴展卡 div 對齊到中心，當媒體屏幕最大寬度為 992px/768px
在我展開 div 的那一刻，展開的 div 沒有居中。
我應該在這里使用什么 flex 屬性？ 如果是這樣，怎么辦？
這里演示了網格布局如何變化以及擴展 div 旁邊的卡片未對齊。
您需要完整查看 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
這很困難，因為每個card_expander都鏈接到它的父card ，並且它的 position 依賴於它。 如果您居中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>
在屏幕上居中顯示動態<div>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.