[英]How to make divs not shrink when window is resized?
當我們回到學校時，我正在為我的同學制作一個筆記頁面，並且我正在使用這個抽認卡類型的 UI。 我目前在頁面上有 4 張卡片，但我需要容納 7 張卡片，並且我希望它可以水平滾動。 我已經嘗試過x-overflow: scroll; 在身體上的 CSS 中，但它似乎沒有工作。 我的代碼附在下面的小提琴中，請告訴我如何解決水平滾動問題。
一般來說，當 window 分辨率發生變化時，我連續有 4 個 div 會縮小 div 的大小。 更改 css 中的 x-overflow 屬性不起作用，那么有沒有辦法讓這些 div 不會縮小而使頁面滾動？
var UID = { _current: 0, getNew: function(){ this._current++; return this._current; } }; HTMLElement.prototype.pseudoStyle = function(element,prop,value){ var _this = this; var _sheetId = "pseudoStyles"; var _head = document.head || document.getElementsByTagName('head')[0]; var _sheet = document.getElementById(_sheetId) || document.createElement('style'); _sheet.id = _sheetId; var className = "pseudoStyle" + UID.getNew(); _this.className += " "+className; _sheet.innerHTML += "."+className+":"+element+"{"+prop+":"+value+"}"; _head.appendChild(_sheet); return this; }; var open = false; function enlarge(box, header) { if (open) { open = false; header.style.top = "35%"; header.style.fontSize = '4.5em'; box.pseudoStyle("before","top","-50%"); box.pseudoStyle("before", "transform", "skewY(345deg)"); box.style.position = 'relative'; box.style.width = '320px'; box.style.height = '420px'; box.style.zIndex = '1'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0)"; document.getElementById("greything").style.zIndex = '-1'; } else { open = true; box.pseudoStyle("before","top","-70%"); box.pseudoStyle("before", "transform", "skewY(390deg)"); box.style.width = '640px'; box.style.height = '840px'; box.style.background = '#122936'; box.style.overflow = 'hidden'; box.style.zIndex = '4'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0.7)"; document.getElementById("greything").style.zIndex = '2'; header.style.top = "10px"; header.style.fontSize = '6em'; } }
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap'); .header { color: whitesmoke; position: relative; z-index: 5; text-align: center; font-size: 4.5em; top: 35%; transition: .5s; } #greything { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: 1s; }.card::before { z-index: 3; content: ''; position: absolute; top: -50%; width: 100%; height: 100%; background: #2196f3; transform: skewY(345deg); transition: 1s; }.card { z-index: 1; position: relative; width: 320px; height: 420px; background: #122936; border-radius: 20px; overflow: hidden; transition: .5s; margin: 50px } * { margin: 0; padding: 0; font-family: Poppins; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #09161d; overflow-x: scroll; } #notes { flex-wrap: nowrap; word-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: rgba(0,0,0,0); }::-webkit-scrollbar-thumb { background: rgba(0,0,0,0); border-radius: 10px; transition: 1s; }::-webkit-scrollbar-thumb:hover { background: #2196f3; transition: 1s; }
<.doctype html> <html> <head> <title>StudySmart Theme</title> <link rel="stylesheet" type="text/css" href="theme.css"> <script src="script,js"></script> </head> <body> <div class="card" id="science" onclick="enlarge(this. document,getElementById('hS'))"> <h1 class="header" id="hS">Science</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="history" onclick="enlarge(this. document,getElementById('hH'))"> <h1 class="header" id="hH">History</h1> </div> <div class="card" id="english" onclick="enlarge(this. document.getElementById('hE'))"> <h1 class="header" id="hE">English</h1> </div> <div id="greything"></div> </body>
只需添加容器。 看這個：
html
<body>
<div class="container">
//your body code
</div>
CSS
.container {
display:flex;
flex-direction: row;
}
工作示例：
var UID = { _current: 0, getNew: function(){ this._current++; return this._current; } }; HTMLElement.prototype.pseudoStyle = function(element,prop,value){ var _this = this; var _sheetId = "pseudoStyles"; var _head = document.head || document.getElementsByTagName('head')[0]; var _sheet = document.getElementById(_sheetId) || document.createElement('style'); _sheet.id = _sheetId; var className = "pseudoStyle" + UID.getNew(); _this.className += " "+className; _sheet.innerHTML += "."+className+":"+element+"{"+prop+":"+value+"}"; _head.appendChild(_sheet); return this; }; var open = false; function enlarge(box, header) { if (open) { open = false; header.style.top = "35%"; header.style.fontSize = '4.5em'; box.pseudoStyle("before","top","-50%"); box.pseudoStyle("before", "transform", "skewY(345deg)"); box.style.position = 'relative'; box.style.width = '320px'; box.style.height = '420px'; box.style.zIndex = '1'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0)"; document.getElementById("greything").style.zIndex = '-1'; } else { open = true; box.pseudoStyle("before","top","-70%"); box.pseudoStyle("before", "transform", "skewY(390deg)"); box.style.width = '640px'; box.style.height = '840px'; box.style.background = '#122936'; box.style.overflow = 'hidden'; box.style.zIndex = '4'; document.getElementById("greything").style.background = "rgba(0, 0, 0, 0.7)"; document.getElementById("greything").style.zIndex = '2'; header.style.top = "10px"; header.style.fontSize = '6em'; } }
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap'); .container { display:flex; flex-direction: row; }.header { color: whitesmoke; position: relative; z-index: 5; text-align: center; font-size: 4.5em; top: 35%; transition: .5s; } #greything { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: 1s; }.card::before { z-index: 3; content: ''; position: absolute; top: -50%; width: 100%; height: 100%; background: #2196f3; transform: skewY(345deg); transition: 1s; }.card { z-index: 1; position: relative; width: 320px; height: 420px; background: #122936; border-radius: 20px; overflow: hidden; transition: .5s; margin: 50px } * { margin: 0; padding: 0; font-family: Poppins; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #09161d; overflow-x: scroll; } #notes { flex-wrap: nowrap; word-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: rgba(0,0,0,0); }::-webkit-scrollbar-thumb { background: rgba(0,0,0,0); border-radius: 10px; transition: 1s; }::-webkit-scrollbar-thumb:hover { background: #2196f3; transition: 1s; }
<.doctype html> <html> <head> <title>StudySmart Theme</title> <link rel="stylesheet" type="text/css" href="theme.css"> <script src="script,js"></script> </head> <body> <div class="container"> <div class="card" id="science" onclick="enlarge(this. document,getElementById('hS'))"> <h1 class="header" id="hS">Science</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="history" onclick="enlarge(this. document,getElementById('hH'))"> <h1 class="header" id="hH">History</h1> </div> <div class="card" id="english" onclick="enlarge(this. document,getElementById('hE'))"> <h1 class="header" id="hE">English</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="math" onclick="enlarge(this. document,getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div class="card" id="math" onclick="enlarge(this. document.getElementById('hM'))"> <h1 class="header" id="hM">Math</h1> </div> <div id="greything"></div> </div> </body>
滾動頁面時調整窗口大小時如何使此效果起作用
[英]How to make this effect work if the window is resized when page is scrolled
調整瀏覽器窗口大小時，如何使用戶可調整大小的畫布窗口也縮小或放大
[英]How make a canvas window that is resizable by the user also scale down or up when the browser window is resized
如何使 div 縮小以適應容器保持其相對寬度？
[英]How to make divs shrink to fit container maintaining their relative widths?
當瀏覽器 window 垂直調整大小時，如何使 div 內的 svg 自動垂直調整大小
[英]How to make an svg inside a div to automatically rescale vertically when the browser window is resized vertically
如何使網頁遵循瀏覽器窗口的大小，並在調整大小時，布局不會失真？
[英]how to make the webpage follow the size of the browser window and when resized, the layout does not get distorted?
如何制作可通過按鈕（javascript）調整為可見窗口大小的HTML表？
[英]How to make HTML table that can be resized to the visible window with button (javascript)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.