图像不会与div的顶部对齐

时间:2014-09-05 00:55:38

标签: html css image web

我正在为朋友制作一个网站主题,我似乎无法将第三个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>

3 个答案:

答案 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张完全匹配,即使调整窗口大小。