问题：
如何使div不缩小时，窗口调整大小？
酆阳煦
当我们回到学校时，我正在为我的同学们制作一个备注页面，我有一个我正在使用的抽认卡类型的UI。我目前有4的卡片在页面上，但我需要适合7，我想它水平滚动。我已经在主体上的CSS中尝试过x-overflow:scroll；，但似乎没有起作用。我的代码附在下面的小提琴，请让我知道我如何可以修复水平滚动问题。
从一般意义上说，我有4个div在一行，当窗口分辨率改变时，它们会缩小div的大小。在css中改变x-overflow属性是行不通的，那么有没有办法让这些div不会缩小，而是让页面滚动呢？
null
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>null
共有1个答案
狄旭
只需添加容器。看看这个:
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>
类似资料：
-
我正在尝试构建一个包含6个窗格（作为父级添加到GridPane布局中）的简单Java项目。我必须在开始时设置窗口大小，并通过参考根布局的宽度和高度，设法将它们均匀地拆分。 但我想要他们调整大小，因为我改变了窗口的大小（使用鼠标，现在他们得到固定的大小）。 下面是我的代码：
-
窗口大小，我们可以非常方便的使用width、height调整，但是如何知道 width和height是一个问题？ 在 Window 操作系统中，假如我们想要缩放，我们通常会把鼠标移动到窗口的右边栏，和底部边栏，以及右下边栏。 而且在不同的边栏，鼠标呈现的样式也是不一样的。当我们在右边栏的时候我们可以通过cursor: e-resize;模拟鼠标样式。 在底部边栏我们可以通过cursor: s-re
-
#include <stdio.h> void fun1(void) { int i = 0; i++; i = i * 2; printf("%d\n", i); } void fun2(void) { int j = 0; fun1(); j++; j = j
-
我有下面的代码，它设置了一个特定大小的窗口。它还从外部URL加载图像。
-
问题内容： 我有以下JQuery代码： 唯一的问题是，这仅在首次加载浏览器时有效，我是否还希望在调整窗口大小时进行检查？ 有任何想法吗？ 问题答案： 这是一个使用jQuery，javascript和css处理调整大小事件的示例。 （如果您只是通过调整大小来设置样式（媒体查询），最好的方法是CSS） [ CSS javascript jQuery 如何停止调整大小的代码执行如此频繁！ 这是绑定到调整
-
问题内容： 当用户结束调整浏览器窗口大小时，jQuery或JavaScript有什么办法触发函数？ 换句话说： 用户调整浏览器窗口大小时是否可以检测到鼠标向上移动事件？除此以外： 我可以检测到窗口调整大小操作何时完成吗？ 我目前只能在用户开始使用jQuery调整窗口大小时触发事件 问题答案： 您可以使用每次实际改变宽度/高度时获取，如下所示： 它会使用新的高度/宽度值并在页面中对其进行更新以供您查
-
问题内容： 我正在用d3.js绘制散点图。借助以下问题： 获取屏幕，当前网页和浏览器窗口的大小 我正在使用此答案： 这样我就可以将图适合用户的窗口，如下所示： 现在，我希望在用户调整窗口大小时可以调整图的大小。 PS：我的代码中没有使用jQuery。 问题答案： 寻找“响应式SVG”，使SVG响应式非常简单，您不必再担心大小。 这是我的做法： 注意： SVG图像中的所有内容都会随窗口宽度缩放。这包
-
问题内容： 我正在创建一个，然后调用该方法。现在，所需的行为是在任何情况下用户都不应调整JFrame的大小。通过最大化或拖动边框。应该是500x500。我该怎么做？我还附上了代码，以防您能更好地指导我。 问题答案： 您可以在构造函数的“帧初始化”下使用一个简单的调用： 调用之后，窗口将无法调整大小。