- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在此先感谢,我正在尝试将粘性图像一个接一个地添加,如下图所示,但我得到的结果是一个在另一个下面。最新添加的便签应该在最上面,所有其他的便签都在最新的后面。任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.pink{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink:hover{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink-button{
padding: 10px 11px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
}
.sticky {
margin: 0;
padding: 8px 24px;
width:200px;
height:200px;
font-size: 1.4em;
border:1px #E8Ds47 solid;
-moz-box-shadow:0px 0px 6px 1px #333333;
-webkit-box-shadow:0px 0px 6px 1px #333333;
box-shadow:0px 0px 6px 1px #333333;
background: #fefdca;
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381));
background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%);
background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%);
background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0 );
background: linear-gradient(top, #fefdca 0%,#f7f381 100%);
}
.sticky p {
text-align: center;
}
.sticky textarea {
width:160px;
height:170px;
background: #fefdca;
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381));
background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%);
background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%);
background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0 );
background: linear-gradient(top, #fefdca 0%,#f7f381 100%);
border-bottom:none !important;
}
.sticky ol {
margin: 12px;
}
</style>
</head>
<body>
<div class="sticky">
<textarea placeholder="Type the problem here..."></textarea>
</div><br/>
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;position:absolute;margin-left:40px;">
<a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a>
</div>
</div>
</body>
<script>
$('#addProblem').click(function(){
$('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>');
});
</script>
</html>
最佳答案
定位粘性并将其放入容器中。然后根据 .sticky
计数分配 left
值。检查下面的片段。
$('#addProblem').click(function() {
$('.sticky').after('<div class="sticky"><textarea placeholder="Type the problem here..."></textarea><br></div>');
var stickyCount = $('.sticky').length - 1;
$('.sticky').each(function() {
$(this).css('left', stickyCount * 100);
stickyCount--;
});
});
.pink {
background: #f05f9d;
border: 1px solid #f05f9d;
color: #fff;
font-weight: 600;
}
.pink:hover {
background: #f05f9d;
border: 1px solid #f05f9d;
color: #fff;
font-weight: 600;
}
.pink-button {
padding: 10px 11px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
}
.sticky {
margin: 0;
padding: 8px 24px;
width: 200px;
height: 200px;
font-size: 1.4em;
border: 1px #E8Ds47 solid;
-moz-box-shadow: 0px 0px 6px 1px #333333;
-webkit-box-shadow: 0px 0px 6px 1px #333333;
box-shadow: 0px 0px 6px 1px #333333;
background: #fefdca;
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381));
background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0);
background: linear-gradient(top, #fefdca 0%, #f7f381 100%);
}
.sticky p {
text-align: center;
}
.sticky textarea {
width: 160px;
height: 170px;
background: #fefdca;
background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefdca), color-stop(100%, #f7f381));
background: -webkit-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -o-linear-gradient(top, #fefdca 0%, #f7f381 100%);
background: -ms-linear-gradient(top, #fefdca 0%, #f7f381 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381', GradientType=0);
background: linear-gradient(top, #fefdca 0%, #f7f381 100%);
border-bottom: none !important;
}
.sticky ol {
margin: 12px;
}
.sticky-container {
position: relative;
min-height: 250px;
}
.sticky {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="sticky-container">
<div class="sticky">
<textarea placeholder="Type the problem here..."></textarea>
</div>
</div><br/>
<div id="spin_btn_div">
<div class="btn-container">
<a class="btn pink pink-button shooter-btn" id="addProblem">Add problem</a>
</div>
</div>
关于javascript - 一个接一个地添加便签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46807869/
我使用下拉菜单提供一些不同的链接,但我希望这些链接在同一选项卡中打开,而不是在新选项卡中打开。这是我找到的代码,但我对 Javascript 非常缺乏知识 var urlmenu = docume
我对 javascript 不太了解。但我需要一个垂直菜单上的下拉菜单,它是纯 JavaScript,所以我从 W3 复制/粘贴脚本:https://www.w3schools.com/howto/t
我已经坐了 4 个小时,试图让我的导航显示下 zipper 接垂直,但它继续水平显示它们。我无法弄清楚为什么会发生这种情况或如何解决它。 如果有人能告诉我我做错了什么,我将不胜感激。我有一个潜移默化的
我正在尝试创建选项卡式 Accordion 样式下拉菜单。我使用 jQuery 有一段时间了,但无法使事件状态达到 100%。 我很确定这是我搞砸的 JS。 $('.service-button').
对于那些从未访问过 Dropbox 的人,这里是链接 https://www.dropbox.com/ 查看“登录”的下拉菜单链接。我如何创建这样的下 zipper 接? 最佳答案 这是 fiddle
我正在制作一个 Liferay 主题,但我在尝试设计导航菜单的样式时遇到了很多麻烦。我已经为那些没有像这样下拉的人改变了导航链接上的经典主题悬停功能: .aui #navigation .nav li
如果您将鼠标悬停在 li 上,则会出现一个下拉菜单。如果您将指针向下移至悬停时出现的 ul,我希望链接仍然带有下划线,直到您将箭头从 ul 或链接移开。这样你就知道当菜单下拉时你悬停在哪个菜单上。 知
我有一个带有多个下拉菜单的导航栏。因此,当我单击第一个链接时,它会打开下拉菜单,但是当我单击第二个链接时,第一个下拉菜单不会关闭。 (所以如果用户点击第二个链接我想关闭下拉菜单) // main.js
我正在尝试制作一个导航下拉菜单(使用 Bootstrap 3),其中链接文本在同一行上有多个不同的对齐方式。 在下面的代码中,下拉列表 A 中的链接在 HTML 中有空格字符来对齐它们,但是空白被忽略
我希望有人能帮我解决这个 Bootstrap 问题,因为我很困惑。 有人要求我在底部垂直对齐图像和其中包含图像的链接。 我面临的问题是他们还希望链接在链接/图像组合上具有 pull-right,这会杀
我正在构建一个 Rails 应用程序,并希望指向我的类的每个实例的“显示”页面的链接显示在“索引”页面的下拉列表中。我目前正在使用带有 options_from_collection_for_sele
我有以下 Bootstrap3 导航菜单 ( fiddle here )。我想设置“突出显示”项及其子链接与下拉列表 1 和 2 链接不同的链接文本(和悬停)的样式。我还希望能够以不同于 Highli
我对导航栏中的下拉菜单有疑问。对于普通的导航链接(无下拉菜单),我将菜单文本放在 H3 中,但是当我尝试对下 zipper 接执行相同操作时,箭头不在标题旁边,而是在标题下方。我决定用 span 替换
我是一名优秀的程序员,十分优秀!