小编kuk*_*kuz的帖子
防止滚动条向左推送内容的纯css方法？
有没有办法防止滚动条用纯 css 将内容或整个页面向左推送？我的意思是没有黑客或任何东西。
我尝试了两种 javascript 解决方案：
1) 将 body 设置为溢出隐藏，将 body.offsetWidth 存储在一个变量中，然后溢出可见，然后用当前的 body.offsetWidth 减去该 offsetWidth 并将差异应用于右边距。
2) 计算 offsetWidth 并在每次调整大小时将其应用于包装器 div。
什么不起作用：
1) 绝对位置。
2）将所有东西都向左浮动是个坏主意。
3）让滚动条可见（看起来很糟糕）。
4）溢出-y隐藏使用户不友好。
推荐指数
解决办法
查看次数
我的 Flexbox 无法居中
我目前正在尝试学习如何制作网站，我刚刚开始测试 Flexbox，但我不知道如何将红色框居中：
我看了一个非常清晰的指南（https://css-tricks.com/snippets/css/a-guide-to-flexbox/），我想我只需要使用 justify-content: center 。但我显然做错了什么请帮忙。
PS 全屏运行代码片段，否则您将看不到问题。
* {
margin: 0px;
padding: 0px;
}
.flex_container {
display: flex;
flex-flow: row wrap;
border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
display: block;
}
body {
justify-content: center;
border: 5px solid grey;
}
#top_menu {
text-align: center;
width: 100%;
height: 40px;
padding: 10px;
border: 5px solid green;
}
#top_menu li {
list-style: none;
font: 20px helvetica;
color: green;
display: inline;
}
main {
padding: 20px; …推荐指数
解决办法
查看次数
创建轮播时使用的role ="listbox"是什么？
只是一个简单的问题
当我尝试创建旋转木马时,我注意到许多示例代码是:
<div class="carousel-inner" role="listbox">
在上面的代码中,role ="listbox"有什么作用？请给我一个见解.
推荐指数
解决办法
查看次数
flexbox中的可拖动拆分窗格窗口无法通过子元素
我用HTML/JS/CSS Flexbox实现了我自己的分割窗格.
在下列情况下我遇到分离器问题 - 其中一个面板具有固定大小(以px为单位),另一个面板设置为grow(flex-grow: 1).
如果其他面板有子尺寸,则不会滚动到最后.它会卡在儿童的大小.
这可以通过分裂窗格面板上的CSS修复,但不能修复孩子吗？
使用flex对我来说非常重要,因为我希望保持应用程序的响应能力,并希望尽可能避免使用固定大小.
这是 我的问题的JSFiddle示例.
代码片段如下.谢谢!
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div'); …推荐指数
解决办法
查看次数
附加到不是数组的JS对象？
我有一个看起来像这样的对象
{
"_id": "DEADBEEF",
"_rev": "2-FEEDME",
"name": "Jimmy Strawson",
"link": "placeholder.txt",
"entries": {
"Foo": 0
}
}
通过$ .getJSON调用将其读入我的javascript.
所以我有JS对象"回复",它包含所有这些数据.
我需要附加项目,以便"条目"扩展如下:
{
"_id": "DEADBEEF",
"_rev": "2-FEEDME",
"name": "Jimmy Strawson",
"link": "placeholder.txt",
"entries": {
"Foo": 0,
"Bar": 30,
"Baz": 4
}
}
我试过了
reply['entries'].push({"Bar": 0});
但这不起作用(我认为因为什么都不是数组)
有人可以提供替代方法吗？
推荐指数
解决办法
查看次数
在显示 div 之前加载图像
我以前从未在这个论坛上问过任何问题，所以我会尽量说得清楚。我试图在我的网站中加载 div 的内容时显示加载屏幕。
我尝试使用 jQuery .load() 函数，但它似乎不起作用。当我使用 .ready() 函数时它可以工作，但我想在显示 div 之前加载所有图像。
所以div被隐藏了（style =“display：none;”）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>
<script>
$("#divtoshow").load(function(){
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>推荐指数
解决办法
查看次数
按特定数组的顺序对其他数组进行排序？
我有一堆这种形式的数组:
var myRows = [
[{idx: 0, val: 90}, {idx: 1, val: 75}, {idx: 2, val: 35}],
[{idx: 0, val: 50}, {idx: 1, val: 17}, {idx: 2, val: 95}],
[{idx: 0, val: 10}, {idx: 1, val: 24}, {idx: 2, val: 80}]
// ...
];
让我们说我想按顺序排序第一行val,所以它变成:
[{idx: 2, val: 35}, {idx: 1, val: 75}, {idx: 0, val: 90}]
有没有一种简单的方法来对剩余的数组进行排序,以便它们的顺序与idx排序的第一行的顺序相匹配？
myArrays = [
[{idx: 2, val: 35}, {idx: 1, val: 75}, {idx: 0, val: 90}]
, [{idx: 2, …推荐指数
解决办法
查看次数
为什么在提供flex-basis时,flex元素不会进入下一行？
我正在尝试为flex元素添加宽度.我提供了flex-basis:20%.如何在下一行/第一行中获得第6和第7个元素？
添加下面的便笺簿链接:scratchpad.io
#wrapper {
display: flex;
}
.children {
flex-basis: 20%;
border: 1px solid;
}<div id="wrapper">
<div class="children">
1
</div>
<div class="children">
2
</div>
<div class="children">
3
</div>
<div class="children">
4
</div>
<div class="children">
5
</div>
<br>
<div class="children">
6
</div>
<div class="children">
7
</div>
</div>提前致谢.
推荐指数
解决办法
查看次数
具有CSS网格的等高不同宽高比框
我正在尝试创建这样的布局:
- 右侧的橙色块都具有相同的纵横比,因此具有相同的高度.
- 蓝色块具有不同的宽高比.
- 蓝色块的高度和橙色块的总和应该相等,如图所示.
有没有办法通过CSS网格创建这样的布局？我知道我可以将橙色项目包装在一个单独的列元素中,但我想避免这种情况.当每个项目的宽高比都是正方形时,我也设法创建了这个布局,但是这个没有运气...
关于jsfiddle的例子http://jsfiddle.net/fq974gov/
.grid {
display: grid;
grid-gap: 10px;
width: 200px;
}
.item-left {
background: lightblue;
padding-bottom: 120%;
}
.item-right {
background: tomato;
padding-bottom: 60%;
}<div class="grid">
<div class="item-left"></div>
<div class="item-right"></div>
<div class="item-right"></div>
<div class="item-right"></div>
</div>推荐指数
解决办法
查看次数
CSS Grid - 一个块与其他块不同
我正在投资组合页面,我想我会添加一些证书.我已经制作了一个网格,并使用了网格中{grid-row-gap: 50px;}的其他块.但其中一个并没有落实到位.
最后一个块(.cert5)的上边距比其他块大.
我将把代码放在下面,这样你就可以看到我到目前为止所做的事情:(SideNote - 我是编码的新手,所以我可能写的不太优雅.)
这是CSS和HTML:
.certcontainer {
background-color: hsl(120, 30%, 40%);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 50px;
justify-items: center;
width: auto;
height: auto;
margin-top: 0;
margin-left: -10px;
margin-right: -8px;
}
.cert1 {
border: 30px solid transparent;
border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
width: 400px;
height: 247px;
margin-top: 80px;
}
.cert2 {
border: 30px solid transparent;
border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) 100 repeat;
width: 400px;
height: 247px;
margin-top: 80px;
}
.cert3 {
border: 30px solid transparent;
border-image: url(http://pngimage.net/wp-content/uploads/2018/06/marcos-para-fotos-dorado-png-5.png) …推荐指数
解决办法
查看次数