http://gyazo.com/16e481d4611e1087f892e7c568640ab1.png
这就是网站发生的事情，每当我输入一定数量的金额时，它总是向上移动内容。为什么是这样？我现在尝试了几个小时才得到这个，我尝试的一切产生了相同的结果。
<style type="text/css">
#main {
width: auto;
height: 800px;
background-color: #666;
display: block;
}
#main #images h4 {
font-family: "Courier New", Courier, monospace;
color: #3998c9;
font-size: 24px;
font-weight: 600;
text-transform: capitalize;
}
#main #images span {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul#navigation li a.home {
width: 90px;
background-position: 0 -80px;
}
ul#navigation li a.aboutus {
width: 125px;
background-position: -90px 0;
}
ul#navigation li a.services {
width: 125px;
background-position: -215px 0;
}
ul#navigation li a.projects {
width: 125px;
background-position: -340px 0;
}
ul#navigation li a.testimonials {
width: 185px;
background-position: -465px 0;
}
#main #images {
display: inline-block;
height: 400px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="125" height="141" alt="logo" /></a>
</div>
<div id="navbar">
<ul id="navigation">
<li><a href="index.html" class="home"></a></li>
<li><a href="aboutus.html" class="aboutus"></a></li>
<li><a href="services.html" class="services"></a></li>
<li><a href="projects.html" class="projects"></a></li>
<li><a href="testimonials.html" class="testimonials"></a></li>
</ul>
</div>
<center>
<div id="main">
<div id="images">
<h4>RESIDENTIAL</h4>
<img src="images/home_1.jpg" width="150" height="150" />
<br /><br />
<span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
<div id="images">
<h4>COMMERCIAL</h4>
<img src="images/home_2.jpg" width="150" height="150" />
<br /><br />
<span>Doing it Right and Getting the Job Done! The possibilities of the product industry are Endless and finding Reliable, Knowledgeable</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
<div id="images">
<h4>GOVERNMENTAL</h4>
<img src="images/home_3.jpg" width="150" height="150" />
<br /><br />
<span>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci., ullamcorper ele...</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
<div id="images">
<h4>INDUSTRIAL</h4>
<img src="images/home_4.jpg" width="150" height="150" />
<br /><br />
<span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
</div>
答案 0 :(得分：2)
尝试：
#main #images {
vertical-align: top; // this is what you're looking for.
display: inline-block;
height: 400px;
width: 200px;
text-align: center;
}
是的，你应该学习如何使用ID和类;）
为方便起见，使用此修复程序和正确标记的完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#main {
width: auto;
height: 800px;
background-color: #666;
display: block;
text-align: center; /* instead of <center> element */
}
.images {
display: inline-block;
vertical-align: top; /* aligning blocks to the top of #main */
height: 400px;
width: 200px;
text-align: center;
position: relative;
}
.images h4 {
font-family: "Courier New", Courier, monospace;
color: #3998c9;
font-size: 24px;
font-weight: 600;
text-transform: capitalize;
}
.images span {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.images span img {
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -45px;
}
</style>
</head>
<body>
<div id="main">
<div class="images">
<h4>RESIDENTIAL</h4>
<img src="images/home_1.jpg" width="150" height="150" />
<br /><br />
<span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
<div class="images">
<h4>COMMERCIAL</h4>
<img src="images/home_2.jpg" width="150" height="150" />
<br /><br />
<span>Doing it Right and Getting the Job Done! The possibilities of the product industry are Endless and finding Reliable, Knowledgeable</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
<div class="images">
<h4>GOVERNMENTAL</h4>
<img src="images/home_3.jpg" width="150" height="150" />
<br /><br />
<span>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci., ullamcorper ele...</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
<div class="images">
<h4>INDUSTRIAL</h4>
<img src="images/home_4.jpg" width="150" height="150" />
<br /><br />
<span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
</div>
</div>
</body>
答案 1 :(得分：0)
您有多个相同的ID。你需要使用类
它在哪里
id="images"
应该是
class="images"
以及CSS样式
将您的主题标签更改为期间
#images
变为
.images
答案 2 :(得分：0)
首先，您有四个具有相同ID的元素。不好。更改“class ='images'”（并相应地在CSS中更正）。
然后，你有了标签，这是一个禁忌。
另外，当我认为你的意思是“大写”时，你正在使用text-transform = capitalize。
我认为你想要的是按钮下降而不是图片/标题上升，对吗？
试试这个： http://jsfiddle.net/yivi/guJE2/2/
#main {
width: auto;
height: 800px;
background-color: #666;
display: block;
vertical-align: top;
}
#main .images h4 {
font-family: "Courier New", Courier, monospace;
color: #3998c9;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
}
#main .images span {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#main .images {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 15px;
min-height: 85px;
}