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

height:10%との組み合わせmin-height:100pxが原因のようです。これを削除すると、リンクがヘッダー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 に答える