小编Joh*_*nes的帖子

我有这个小问题.我有一个主要的div与班级scroll.我有几个其他输入参数,我从用户那里获取输入.此输入垂直填充整个页面.

现在,我通过Chrome最小化按钮最小化屏幕.(即恢复向下按钮).页面会缩小,并且自设置为滚动条后会显示overflow:scroll.

现在的问题是它不会滚动到页面的末尾.假设有20个输入参数,当我最小化时,我只能向上滚动到第18个输入参数.滚动条不超过18并隐藏最后2个,因此观看者无法看到.

<div class="scroll">
</div>
<!-- Added this extra div below and now able to scroll the last 2 parameters as well -->
<div style="height:50px;">
</div>

.scroll {
height:100%;
overflow:scroll; 
}

如果我做错了,有人可以告诉我.

我的标题中有一个元素从js文件中获取数据.

我试图将这个元素集中在我的页面中,但我所做的一切似乎都有效.

我尝试了margin-left:auto和margin-right:auto但仍然没有居中.

元素代码是:

<a href="http://[ip]/tunein/tranceilfm.pls" id="cc_strinfo_song_tranceilfm" class="cc_streaminfo" style="margin: 0px; display: block; ">Loading...</a>

http://tranceil.fm

(菜单下方框架中的蓝色歌曲信息)

有什么想法吗？

我试图获得三个盒子,使用弹性盒将div通过div分配给该div的EDGES.我需要使用justify-content:space-between; 按照w3schools

但是我有一个额外的div(由wordpress生成)所以我的html是:

<div class="locationHolder">
  <div class="textwidget"> <!-- extra div-->
    <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
  </div>
</div>

如果我这样做css:

page-template-home-page .locationHolder .textwidget{
 display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width:100%;
    background:green;
}

.page-template-home-page .locationSquare {
    width:30.942%;
    background:#fff;
    margin:0;
}

我在最左边和最右边都有空间 - 外面的盒子没有到达边缘.如果我删除<div class="textwidget">它</div>然后它工作正常.

如果我把locationHolder作为display:flex等它就不起作用了

我可以用jQ删除额外的div但是有一个css解决方案来克服这个问题吗？

好的.我的标题可能没有让你对我的问题实际上是什么有足够的了解,但我真的不知道如何在标题中总结这个特殊问题.这是我的代码:

@import url('https://fonts.googleapis.com/css?family=Londrina+Sketch');
@import url('https://fonts.googleapis.com/css?family=Ranga');
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One');
body {
  background: url("http://wallpapercave.com/wp/X5iq6dZ.jpg");
}

header {
  background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png);
  color: white;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 50px;
}

header h1 {
  font-family: 'Londrina Sketch', cursive;
  font-size: 2em;
  margin-right: 50px;
}

header nav {
  display: inline;
  position: relative;
  bottom: 50px;
  left: 80%;
}

header nav a {
  font-family: 'Ranga', cursive;
  text-decoration: overline;
  margin-right: 25px;
  color: white;
  font-size: 1.5em;
}

header nav a:hover {
  text-decoration: none;
  color: grey;
}

#section1 span {
  color: …

正在学习 Jasmine，想知道以下测试是否有效？如果没有，有人可以解释为什么吗？我已经阅读了许多教程，但找不到一个好的解释来帮助我理解为什么我似乎无法正确编写如下所示的测试。

// spec
describe("when cart is clicked", function() {
    it("should call the populateNotes function", function() {
        $("#show-cart").click()
        expect(populateNotes()).toHaveBeenCalled();
    })
})

// code
$("#show-cart").click(function() {
    populateNotes();
})

可以，然后呢。我有个问题。

我想要一张悬停时模糊的图片，同时让文字出现在它上面。

我找到了一种简单的方法来模糊图像并显示文本，但不能同时显示两者；事实上，将两个代码合并在一起可以使图片看起来一点也不模糊。我认为这是因为文本实际上覆盖了图像，并且浏览器没有收到图像正在悬停的消息。

这是上面有文字的图像，这是悬停时模糊的图像 我该如何解决这个问题？我正在挣扎，我想我已经找到了另一种方法，但它有点麻烦。

这是一些代码：

	h1,p {
		margin: 0;
		padding: 0;
	}
	.imgtext {		
		color: white;
		background: rgba(0,0,0,0.89);
		width: 155px;
		height: 135px;
		padding: 50px 15px 0 15px;
		opacity: 0;
		position: absolute;
		bottom: 0px;
		-webkit-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
	}
	.pic {
   	position: relative;
		overflow: hidden;
		width: 185px;
		height: 185px;
		margin: 50px auto;
	}
	.pic img:hover{
		-webkit-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
		-webkit-filter: blur(1px); …

我有 2 个 div 类，分别称为 box1 和 box2。

当我将屏幕尺寸更改为 600px 或更小时，box1 和 box2 都获得宽度：100%，并且 box1 保持在顶部，box2 保持在底部。有什么方法可以更改这些框的位置，以便 box2 保持在顶部，box1 保持在底部，而不改变 html 中的元素位置？

    <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>this is the title</title>


<style type="text/css">


.box1{
    width:100px;
    height:100px;
    background:red;
    float:left;
}

.box2{
    width:100px;
    height:100px;
    background:blue;
    float:right;
}

.wrapper{
    max-width:500px;
}




@media screen and (max-width:600px){  /* for tablets */
    .box1{
        width:100%;
        float:right;
    }
    .box2{
        width:100%;
        float:right;
    }
}


</style>



</head>

<body>

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>

</div>

<script>


</script> …

p {
  overflow-y: hidden;
  height: 150px;
}

@media screen and(min-width: 700 px) {
  p {
    max-height: 150 px;
  }
}

<p>
   Hello Hello Hello Hello Hello Hello Hello Hello Hello
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</p>

<strong>h1</strong>

我希望height在屏幕宽度小于700px时删除该属性.如果我这样做height:0px;,它完全隐藏了段落.任何CSS解决方案？或者我需要使用jQuery？

CSS：

    body{
      background-image:url("img-address");
    }

我希望图像不要重复多次，而是覆盖整个屏幕。我不想使用我想使用的普通图像background-image。

是否有一种仅 CSS 的方法可以淡出此文本，如下所示，并在动画完成后使其保持隐藏状态？它当前淡出，然后再次出现。我尝试添加display: none（以及height: 0px，这并不是我真正想要的），但问题仍然存在 - 一旦动画完成，它就会重新出现。

很高兴使用一些 JavaScript 来做到这一点（有一个堆栈溢出答案解释了如何侦听动画事件的结束），但纯 CSS 是首选。

.fade-out {
  animation: fadeOut ease 5s;
  -webkit-animation: fadeOut ease 5s;
  -moz-animation: fadeOut ease 5s;
  -o-animation: fadeOut ease 5s;
  -ms-animation: fadeOut ease 5s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  } …