小编kuk*_*kuz的帖子
更改备用元素css的背景颜色
我想改变替代元素的颜色,但我的代码不起作用.我的代码更改了整个容器元素的颜色.
任何人都可以告诉我在代码中哪里出错？
.pvt-msg-panel {
height: 92vh;
float: left;
margin-top: -20px;
}
#pvt-messages-box {
height: 50vh;
width: 650px;
margin-top: 10px;
margin-left: 10px;
overflow-y: scroll;
}
.pvt-messages-box-item {
padding: 10px;
padding-left: 20px;
position: relative;
display: inline-block;
width: 100%;
color: black;
padding-left: 20px;
font-size: 12px;
cursor: pointer;
}
.pvt-messages-box-item:nth-child(odd) {
background-color: green;
}
.pvt-messages-box-item:nth-child(even) {
background-color: white;
}<div class="pvt-msg-panel">
<section id="pvt-messages-box">
<span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span>
<br>
<span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span>
<br>
<span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span>
<br>
</section>
</div>推荐指数
解决办法
查看次数
我的 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; …推荐指数
解决办法
查看次数
在显示 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>推荐指数
解决办法
查看次数
CSS表 - 添加边距列和行边框底部
我有一个HTML表格元素,我试图在列之间添加边距,所以我使用了那些css属性:
table {
border-collapse: separate;
border-spacing: 36px 0px;
}
现在我想在标题和正文中的每个tr中添加border-bottom到整行,但边框不会出现.我用了:
tr {
border-bottom: 1px solid blue;
}
它只在我使用时出现:
table {
border-collapse: collapse;
}
但是我不会在列之间留有余量.
推荐指数
解决办法
查看次数
按特定数组的顺序对其他数组进行排序？
我有一堆这种形式的数组:
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>提前致谢.
推荐指数
解决办法
查看次数
Cognito自定义消息并包括用户属性
我们正在运行一个基于Spring的项目，其中Cognito作为标识服务。
我们有一个项目要求，为Cognito用户池中的用户自定义验证电子邮件和邀请电子邮件。（请参阅here for the AWS doc）
默认验证消息：
您的验证码为{####}。
默认邀请消息：
您的用户名是{username}，临时密码是{####}。
我们希望包括email，phone_number和name用户属性为这些电子邮件。是否有可能做到这一点？我搜索文档无济于事-确实需要一些建议。
spring amazon-web-services spring-boot aws-java-sdk aws-cognito
推荐指数
解决办法
查看次数
让弹性盒列填充可用空间
我一直在尝试让 css 弹性框正常工作，以填写列弹性框中的项目。
基本上，我希望这段代码能够均匀地间隔两个弹性部件，每个部件占据可用高度的 50%。如果我手动将高度设置为 50%，它会起作用，但这似乎是不正确的解决方案，因为我认为这就是设置 flex:1 应该做的事情。
我在这里阅读了指南： https: //css-tricks.com/snippets/css/a-guide-to-flexbox/并尝试了各种align-self、flex-grow、align-content，看看这些是否可以修复它，但到目前为止我还没有运气。我确信我错过了一些简单的东西，但我一直无法弄清楚，并且阅读有关堆栈溢出的其他问题似乎并没有帮助我弄清楚我做错了什么。
.flex {
display: flex;
}
.flex1 {
flex: 1;
}
.col-flex {
flex-flow: column nowrap;
justify-content: space-evenly;
}<div class="flex" style="height:200px">
<div class="flex1">
<div class="col-flex" style="height:100%;background-color:grey">
<div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div>
<div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div>
</div>
</div>
<div class="flex1" style="background-color: red;">
The flex on the row based flex works correctly;
</div>
</div>完整代码在这里： https: //codepen.io/anon/pen/EwbLMM
推荐指数
解决办法
查看次数
显示 flexbox 居中但左对齐项目，如文本左对齐
我正在尝试将这些 div 设置为显示在中心，但保持它们的项目显示在左侧，就像text-align: left会做的那样。
这是我的例子：https : //jsfiddle.net/gr5Lmos1/
#donateList {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
flex-direction: column;
flex-wrap: wrap;
}
.donateItem {
flex: 0 1 auto;
align-items: flex-start;
justify-content: flex-start;
align-self: center;
}
.donateItem * {
display: inline-block;
}
.donateItem p {
vertical-align: bottom;
}
.donateItem img {
height: 64px;
width: 64px;
}<div id="donateList">
<div class="donateItem">
<img src="/images/icons/bitcoin.png">
<p>Bitcoin:</p>
<p>fkewjhf;eiwhf;iewfhwehfewifhew</p>
</div>
<div class="donateItem">
<img src="/images/icons/paypal.png">
<p>Paypal:</p>
<p>eijfhewfwifhefefewf</p>
</div>
</div>我正在尝试将 donateItem 的内容显示在所有左侧，但将所有 donateItem 的 …
推荐指数
解决办法
查看次数
当我将鼠标悬停在它们上面时,为什么只有一些CSS网格框在扩展？
我是CSS的网格新手,但我想尝试一下.我有一个3x3盒子的网格.当我将鼠标悬停在一个盒子上时,它应该应该排出整行...但是这不起作用.
当我将鼠标悬停在1屏幕上时,它会完全填满屏幕,当我将鼠标悬停在3屏幕上时,它会开始闪烁并且无法正常工作.
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, minmax(100px, auto));
grid-template-rows: repeat(3, minmax(100px, auto));
}
[class^="item"] {
text-align: center;
box-sizing: border-box;
padding: 10%;
font-size: 5em;
color: #0580d5;
transition: .2s;
}
[class^="item"]:hover {
grid-column-start: 1;
grid-column-end: 4;
}
.item-1 {
/*grid-area: 1 / 2 / span 2 / span 2;*/
}
.container>div {
border: 2px solid #0580d5;
background-color: rgba(40, 180, 240, .3);
border-radius: 5px;
}
@media only screen and (min-width: 789px) {
.container {
grid-template-columns: …推荐指数
解决办法
查看次数
标签 统计
css ×8
html ×8
flexbox ×4
alignment ×2
css3 ×2
javascript ×2
arrays ×1
aws-cognito ×1
aws-java-sdk ×1
centering ×1
css-float ×1
css-grid ×1
css-tables ×1
html-table ×1
jquery ×1
rowsorter ×1
sorting ×1
spring ×1
spring-boot ×1