我正在为朋友制作一个网站主题，我似乎无法将第三个div中的图像触及顶部，任何关于为什么会发生这种情况的想法？网站演示：http://blindersjournal.pancakeapps.com/indexblinders.html/
CSS：
.one {
background: url("http://i.imgur.com/A2Eps8D.jpg");
background-size: cover;
background-repeat: no-repeat;
min-height: 65px;
background-attachment: fixed;
}
@font-face {
font-family: Nexa;
src: url('https://dl.dropboxusercontent.com/u/105222237/Nexa%20Bold.otf');
}
.navlinks li {
font-family: Nexa;
font-size: 20px;
list-style-type: none;
margin: 0;
padding-left: 125px;
vertical-align: middle;
line-height: 63px;
display: inline;
}
nav img {
float: left;
height: 60px;
}
* {
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
color: #fff;
}
.two {
background-color: black;
max-height: 200px;
overflow: hidden;
}
.twoimg img {
height: 200px;
max-width: 200px;
}
.twoimg {
float: left;
}
article {
max-width: 500px;
margin: 0 auto;
color: #fff;
margin-top: 25px;
}
.name {
font-family: Nexa;
font-size: 20px;
}
.three {
background-color: black;
max-height: 200px;
overflow: hidden;
}
.threeimg img {
height: 200px;
max-width: 200px;
}
.threeimg {
float: right;
}
HTML：
<head>
<link href="/normalize.css" rel="stylesheet">
<link href="/indexblinders.css" rel="stylesheet">
<title>Blinders Journal</title>
</head>
<body>
<div class="one">
<nav>
<img src="http://i.imgur.com/zkED7Bc.png" />
<div class="navlinks">
<ul>
<li><a href="#">Submissions</a></li>
<li><a href="#">Masthead</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</nav>
</div>
<div class="two">
<div class="twoimg">
<img src="http://blindersjournal.org/img/Lisa.JPG" />
</div>
<article>
<p><span class="name">Lisa Beth Fulgham</span> is a recent graduate of Mississippi State University's M.A. program in creative writing and is the Managing/Founding Editor of Blinders Literary Journal. Currently, she is a wanderer and is working on submitting her chapbook, A Voice Raised From the Dirt. She is the former Associate Editor of The Jabberwock Review, and she is a fan of Southern Gothic literature or basically anything that gives her the creeps.</p>
</article>
</div>
<div class="three">
<article>
<p><span class="name">Rachel M. Rice</span> is the Nonfiction Editor of Blinders Literary Journal. A soon-to-be graduate of Mississippi State University's M.A. program, she is currently working on a collection of short stories about living as an LGBTQ person on the Mississippi Gulf Coast. As soon as she graduates, she'll be joining her husband, buying a house, adopting a dog, and generally, being an adult.</p>
</article>
<div class="threeimg">
<img src="http://blindersjournal.org/img/Rachel.JPG" />
</div>
</div>
<script>
$(document).ready(function(){
$('section[data-type="background"]').each(function(){
var $bgobj = $(this);
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});
</script>
</body>
答案 0 :(得分：0)
试试这个css（来自这个小提琴：http://jsfiddle.net/mt0j59jw/1/）
<body>
<div class="one">
<nav>
<img src="http://i.imgur.com/zkED7Bc.png" />
<div class="navlinks">
<ul>
<li><a href="#">Submissions</a></li>
<li><a href="#">Masthead</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</nav>
</div>
<div class="two">
<div class="twoimg">
<img src="http://blindersjournal.org/img/Lisa.JPG" />
</div>
<article>
<p><span class="name">Lisa Beth Fulgham</span> is a recent graduate of Mississippi State University's M.A. program in creative writing and is the Managing/Founding Editor of Blinders Literary Journal. Currently, she is a wanderer and is working on submitting her chapbook, A Voice Raised From the Dirt. She is the former Associate Editor of The Jabberwock Review, and she is a fan of Southern Gothic literature or basically anything that gives her the creeps.</p>
</article>
</div>
<div class="three">
<article>
<p><img src="http://blindersjournal.org/img/Rachel.JPG" class="threeimg" /><span class="name">Rachel M. Rice</span> is the Nonfiction Editor of Blinders Literary Journal. A soon-to-be graduate of Mississippi State University's M.A. program, she is currently working on a collection of short stories about living as an LGBTQ person on the Mississippi Gulf Coast. As soon as she graduates, she'll be joining her husband, buying a house, adopting a dog, and generally, being an adult.
</p>
</article>
</div>
<script>
$(document).ready(function(){
$('section[data-type="background"]').each(function(){
var $bgobj = $(this);
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
var coords = '50% '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
});
});
});
</script>
</body>
CSS
.one {
background: url("http://i.imgur.com/A2Eps8D.jpg");
background-size: cover;
background-repeat: no-repeat;
min-height: 65px;
background-attachment: fixed;
}
@font-face {
font-family: Nexa;
src: url('https://dl.dropboxusercontent.com/u/105222237/Nexa%20Bold.otf');
}
.navlinks li {
font-family: Nexa;
font-size: 20px;
list-style-type: none;
margin: 0;
padding-left: 125px;
vertical-align: middle;
line-height: 63px;
display: inline;
}
nav img {
float: left;
height: 60px;
}
* {
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
color: #fff;
}
.two {
background-color: black;
max-height: 200px;
overflow: hidden;
}
.twoimg img {
height: 200px;
max-width: 200px;
}
.twoimg {
float: left;
}
article {
max-width: 500px;
margin: 0 auto;
color: #fff;
margin-top: 25px;
}
.name {
font-family: Nexa;
font-size: 20px;
}
.three {
background-color: black;
max-height: 200px;
overflow: hidden;
}
.threeimg {
float: right;
height: 200px;
max-width: 200px;
}
答案 1 :(得分：0)
将position: relative添加到.three并为.threeimg提供以下CSS：
.threeimg {
position: absolute;
top: 0;
right: 0;
}
无需float
答案 2 :(得分：0)
编辑：这将使第二个图像与第一个图像的底部对齐，使用rachel文章。 尝试切割
<div class="threeimg">
<img src="http://blindersjournal.org/img/Rachel.JPG" />
</div>
并粘贴它<article>
这就是你想要的吗？在这里演示（编辑3）：http://jsfiddle.net/ca9yfssu/3/ 上次编辑评论：编辑以使第3张图像与第2张完全匹配，即使调整窗口大小。