现在我正试图找到带有链接的框的底部，以触摸标题的底部，但无法做到这一点。我试着去掉尽可能多的填充物，我试着让盒子的位置绝对，但我就是做不到
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Excercise 2 CSS</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="header">
<img src="img.png" id="top_image" alt="top_image" />
<div class="link_container">
<a href="#">Home</a>
</div>
<div class="link_container">
<a href="#">Locations</a>
</div>
<div class="link_container">
<a href="#">New Account</a>
</div>
<div class="link_container">
<a href="#">Contact Us</a>
</div>
</div>
<div class="content">
</div>
<div class="footer">
<p><b><i>Copyright 2011 Hometown Bank, Inc.</i></b>
<a href="#">Privacy Policy</a>
<a href="#">Legal</a></p>
</div>
</body>
</html>
这是css
html { height: 100%; width: 100%; smin-height: 1000px; }
body { height: 90%; width: 90%; min-width: 1135px; min-height: 570px; margin:0px; margin-left:5%; margin-top: 2%;
box-shadow: 0px 5px 5px 5px #999999; margin-bottom:5%; background-color: #FFFFFF;
}
.header
{
height: 10%;
width: 100%;
background-color: #DAFFFF;
spadding-top: 1%;
min-height: 100px;
}
.content
{
height:75%;
width: 100%;
min-height:390px;;
background-color:#DAFFAA;
}
.text_area
{
height: 135px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
padding: 15px 20px 15px 10px;
margin-bottom:25px; background-color:#00EEFF;
}
.news_header
{
width:250px; background-color:#00CCCC; height: 30px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
padding-top:5px;
}
.news_box
{
height:170px; width:250px; background-color: #00EEFF;
float:right; display:inline;
}
.footer
{
font-family:Arial, Helvetica, sans-serif;
height: 5%;
width: 100%;
background-color:#00BBBB;
min-height:25px;
margin: 0px;
}
.link_container
{
display:inline-block;
height:50%;
width:10%;
background-color:#FF0;
}
.header img { margin-left:2%; width:10%; height: 75px;}
如果你需要更多信息，请让我知道
您的height:10%和min-height:100px的组合似乎是造成这种情况的原因。删除它会使您的链接排在标题div的底部。
http://jsfiddle.net/tomprogramming/namH7/1/
将链接容器的高度更改为100%，以便div填充它们的容器。
.link_container
{
display:inline-block;
height:100%;
width:10%;
background-color:#FF0;
}
然后向图像添加垂直对齐样式，以相对于图像定位div。
<img src="img.png" id="top_image" alt="top_image" style="vertical-align:top;" />
如果你只想向下移动黄色链接框，你可以用margin-top或position:relative；
.link_container
{
margin-top: 50px;
or
position: relative;
top: 50px;
}