0

现在我正试图让带有链接的框的底部触摸标题的底部，但无法做到这一点。我尝试删除尽可能多的填充我尝试使框位置绝对，但我做不到。这是html

<!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;}

如果您需要更多信息，请告诉我

4

3 回答 3

2

Your combination of height:10% and min-height:100px seems to be causing it. Removing it makes your links line up at the bottom of the header div.

http://jsfiddle.net/tomprogramming/namH7/1/

于 2012-12-17T21:31:45.817 回答
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;" />
于 2012-12-17T21:36:26.113 回答
0

如果您只想向下移动黄色链接框，您可以使用 margin-top 或 position: relative;

    .link_container
    {
       margin-top: 50px;
       or
       position: relative;
       top: 50px;

    }
于 2012-12-17T21:35:49.903 回答