Question

现在我正试图通过它们中的链接来触摸标题底部的框的底部，但无法让它做到这一点。我尝试尽可能多地删除填充，我已经尝试使盒子位置绝对，我只是不能这样做。这是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;}

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

Answer 1

height:10%和min-height:100px的组合似乎正在导致它。删除它会使您的链接在标题div的底部对齐。

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

Answer 2

将链接容器的高度更改为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;" />

Answer 3

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

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

    }

链接框不会触及标题的底部

3 个答案: