调整 window 大小时如何使 div 不缩小？
[英]How to make divs not shrink when window is resized?
问题描述
I am making a notes page for my classmates as we return to school, and I have this flashcard-type UI that I'm using.
当我们回到学校时，我正在为我的同学制作一个笔记页面，并且我正在使用这个抽认卡类型的 UI。 I currently have 4 of the cards on the page, but I need to fit 7, and I would like it to scroll horizontally.我目前在页面上有 4 张卡片，但我需要容纳 7 张卡片，并且我希望它可以水平滚动。 I have already tried x-overflow: scroll;我已经尝试过x-overflow: scroll; in CSS on the body, but it didn't seem to work.在身体上的 CSS 中，但它似乎没有工作。 My code is attached to the fiddle below, please let me know how I can fix the horizontal scrolling problem.我的代码附在下面的小提琴中，请告诉我如何解决水平滚动问题。
In a general sense, I have 4 divs in a row that shrink the div size when the window resolution is changed.一般来说，当 window 分辨率发生变化时，我连续有 4 个 div 会缩小 div 的大小。 Changing the x-overflow property in css doesn't work, so is there a way so these divs will not shrink and will make the page scroll instead?更改 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>
1 个解决方案
解决方案1
3 已采纳 2020-08-14 14:01:55
Just add container.只需添加容器。 Look at this:看这个：
html html
<body>
<div class="container">
//your body code
</div>
CSS CSS
.container {
display:flex;
flex-direction: row;
}
Working example:工作示例：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动页面时调整窗口大小时如何使此效果起作用 - How to make this effect work if the window is resized when page is scrolled
调整窗口大小后如何使我的网站停留 - How can I make my website stay when window is resized
CSS：调整窗口大小时，其中一个DIV位置更高 - CSS : One of the DIVs gets positioned higher when window is resized
调整浏览器窗口大小时，如何使用户可调整大小的画布窗口也缩小或放大 - 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?
如何在jQuery中缩小和恢复Div - How to Shrink and Restore Divs in jQuery
如何在水平窗口调整大小时缩小网页的边距？ - How do I make the margins of a webpage shrink on horizontal window resize?
如何制作可通过按钮（javascript）调整为可见窗口大小的HTML表？ - How to make HTML table that can be resized to the visible window with button (javascript)?
相关标签