个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我遇到了一个我似乎无法解决的问题，在我的 23 英寸显示器上，页面显示了内容，但是在我的 14 英寸笔记本电脑屏幕上却没有显示所有内容，我可以滚动一点但不能一直滚动以查看页面的 res，任何暴徒？
body {
font-family: Arial, Verdana, sans-serif;
background-color: #141414;
color: #fff;
font-size: 90%;
margin: 0px;
padding: 0px;
}
img#logo {
width: 250px;
position: relative;
bottom: 0px;
left: 10px;
border: none;
}
div#nav {
background-color: rgba(7, 7, 7, 0.7);
box-shadow: 0px 3px 10px #000;
height: 70px;
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
div#division {
margin-top: 120px;
}
.octo {
position: fixed;
right: 0px;
width: 100%;
height: 100%;
margin-bottom: 100px;
}
.wraper {
margin: 10px auto 10px auto;
width: 1200px;
padding-left: 100px;
}
.poster {
display: inline-block;
width: 273px;
}
figure {
background-color: rgba(106, 192, 69, 0.7);
border-radius: 5px;
padding-left: 3px;
}
img {
}
figcaption {
font-weight: bold;
padding-left: 5px;
}
figure:hover {
background-color: #1ba6e0;
border-radius: 5px;
} <!DOCTYPE html>
<html>
<head>
<title>Rewind HD</title>
<link rel="stylesheet" type="text/css" href="CSS/rewind hd.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="nav">
<img id="logo" src="images/REWIND HD web.png">
</div>
<div id="division"></div>
<div class="wraper">
<div class="poster">
<figure>
<figcaption>James Bond<br /> Octopussy</figcaption>
<a href="james Bond.html"><img src="images/octopussy.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> A View To A Kill</figcaption>
<a href="james Bond A view to kill.html"><img src="images/JBAVTK.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> For Your Eyes Only</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond For Your Eyes Only.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Licence To Kill</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Majestys Secret Service</figcaption>
<a href="James Bond On Her Majestys Secret Service.html"><img src="images/James Bond On Her Majestys Secret Service.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Living Daylights</figcaption>
<a href="James Bond The Living Daylights.html"><img src="images/James Bond The Living Daylights.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Spy Who Loved</figcaption>
<a href="James Bond The Spy Who Loved.html"><img src="images/James Bond The Spy Who Loved.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg" class="background_color"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"
</figure>
</div>
</div>
</body>
</html>***strong text***
最佳答案
我想你想要这样的东西:首先，将 wrapper 的 width 更改为 85% 以获得流体包装。然后将 float:left 添加到 .poster 类。代码在这里(你有一个小的响应页面):
<!DOCTYPE html>
<html>
<head>
<title>Rewind HD</title>
<link rel="stylesheet" type="text/css" href="CSS/rewind hd.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Verdana, sans-serif;
background-color: #141414;
color: #fff;
font-size: 90%;
margin: 0px;
padding: 0px;
}
img#logo {
width: 250px;
position: relative;
bottom: 0px;
left: 10px;
border: none;
}
div#nav {
background-color: rgba(7, 7, 7, 0.7);
box-shadow: 0px 3px 10px #000;
height: 70px;
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
div#division {
margin-top: 120px;
}
.octo {
position: fixed;
right: 0px;
width: 100%;
height: 100%;
margin-bottom: 100px;
}
.wraper {
margin: 10px auto 10px auto;
width: 85%;
padding-left: 100px;
}
.poster {
display: inline-block;
width: 273px;
float:left;
}
figure {
background-color: rgba(106, 192, 69, 0.7);
border-radius: 5px;
padding-left: 3px;
}
img {
}
figcaption {
font-weight: bold;
padding-left: 5px;
}
figure:hover {
background-color: #1ba6e0;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="nav">
<img id="logo" src="images/REWIND HD web.png">
</div>
<div id="division"></div>
<div class="wraper">
<div class="poster">
<figure>
<figcaption>James Bond<br /> Octopussy</figcaption>
<a href="james Bond.html"><img src="images/octopussy.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> A View To A Kill</figcaption>
<a href="james Bond A view to kill.html"><img src="images/JBAVTK.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> For Your Eyes Only</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond For Your Eyes Only.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Licence To Kill</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Majestys Secret Service</figcaption>
<a href="James Bond On Her Majestys Secret Service.html"><img src="images/James Bond On Her Majestys Secret Service.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Living Daylights</figcaption>
<a href="James Bond The Living Daylights.html"><img src="images/James Bond The Living Daylights.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Spy Who Loved</figcaption>
<a href="James Bond The Spy Who Loved.html"><img src="images/James Bond The Spy Who Loved.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg" class="background_color"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a>
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"
</figure>
</div>
</div>
</body>
</html>
关于html - 页面的其余部分不向下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36686258/
25
4
0
我正在使用面部跟踪进行 HCI(人机交互)。我正在尝试使用面部控制 PC。 我有 3x3 二维网格按钮。1 2 34 5 67 8 9 假设，当前焦点在按钮 5 上。如果我按向上箭头，则焦点将在 2
我正在为蛇和梯子制作一 block 板，到目前为止，我已经按降序打印了板。但是，我需要以正确的方式打印电路板。 编辑“螺旋下降”意味着 100...91 81...90 80...71 ...
我有一个可以响应式调整大小的菜单，因此每次调整大小时 div (#menuWFhover) 的内容都会重新排列，因此 div 根据窗口大小具有不同的高度。 当我使用 jQuery slideDown/
我们从服务器获取数据并附加 ListView 。我们的问题是，当向上/向下滚动时，它首先显示白屏，然后显示数据。向下/向上滚动时，之前出现的白屏应删除 for (var i=0; i");
我想要一个汉堡图标动态改变颜色的代码，以适应网站的黑色部分/部分和白色。它最初是 3 段白色，js 代码几乎是好的和正确的，但是当它在白色部分时它一直闪烁，并在红色和白色之间闪烁。 js var to
我对点击事件的页脚位置有疑问。我正在使用 bootstrap css，我有一个可折叠元素(bootstrap 中的 Accordion )，当它折叠时它有一个名为 .accordion-toggle.
在此代码段中，使用关键帧和动画并显示无/ block ，div 动画以在悬停时向下滑动。 h1 { padding: 20px; } div { width: 100%; background
我需要对一个 float 进行四舍五入。例如 4.00011 。内置函数 round() 总是在数字 > .5 时向上舍入，在 = 0 val *= 10 ** precision r
我正在尝试就地缩小文件。 我正在用另一个文件的内容替换一个文件的内容，完成后我想确保源文件是否小于目标文件，目标文件是否正确收缩。 (为什么:因为dest文件是一个备份，写入media的开销很大，所以
似乎每当我用一个负整数除以一个正整数时，我都需要它向下舍入 (向 -inf)，而不是向 0。但 C# 和 C++ 都向 0 舍入。 所以我想我需要一个 DivideDownward() 方法。我可以用
考虑这个简单的代码: document.addEventListener( 'keypress', function() { console.log( 'press' ); } ); document
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
我见过几个recyclerview的无限滚动示例，但它们都是向下滚动的。 我想要的是一次又一次地加载我的列表，但无论用户是从上面还是从下面滚动。 正常列表 向上滚动 向下滚动 这样可以通过无限滚动一遍
我正在使用带有 View 的 drupal 7，并且我正在使用我发现的向上/向下文本幻灯片的 jquery 脚本。它有效，但是当我尝试将它与带有 ajax 的 View 公开过滤器一起使用时，它似乎不
*场景 我希望制作一个类似于本网站上的 jquery 效果，它位于主 Flash 添加的右侧: http://www.commbank.com.au/ *问题 我已经开始了，但是用很多方法遇到了一些障
互联网。如果这与其他人没有什么关系，请原谅我，但我会将其留在这里，以防这是一个有效的问题。 我正在尝试创建一个文本区域字段，其中用户每次按下键(a-z)，都会触发背景颜色更改(在数组中列出)。我一直在
我正在创建一个网络前端来控制一个小型机器人。 Ajax 调用将在 keydown 上进行，以启动机器人，并在 keyup 上进行停止。 我的问题是，当按下某个键时，keyup、keydown 和 ke
我在内容容器中有两个 div，一个向左浮动，另一个向右浮动。我正在使用屏幕的整个宽度。左 div 宽度为 1290px，右 div 宽度为 625px。有时，在加载页面时，滚动条会更改可用屏幕宽度的宽
请看这个UI sketch图片，我在某个站点的侧边栏(黑框)中有这个 div，当我向下滚动或向上滚动时，我不希望它隐藏...我希望它在我向下滚动和移动时自行向下移动当我向上滚动时向上滚动，这样它就永远
我是一名优秀的程序员,十分优秀！