Question

我正在尝试构建一个包含多个可点击元素的框，这些元素都包含在自己的DIV中。

最终结果应该是一个包含和图像作为背景的框，以及一个在框中级联的可点击“标题”列表。

这是我网站的代码：（以下是此代码的示例链接：http://www.culebraislandvacationrentals.com/stackoverflow.hmtl）

<body>
   <div id="page">
      <div id="logo">
         <a href="http://www.culebraislandvacationrentals.com/nonsaleable/index.html">
         <img src="http://www.culebraislandvacationrentals.com/nonsaleable/images/logo.png" height="70"></a>
      </div>
      <div id="tab">
         <ul>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
         </ul>
      </div>
      <!--:tab-->
      <div id="header-tabs">
         <img src="http://www.culebraislandvacationrentals.com/nonsaleable/images/tab/new_back.png">
         <div id="header-tab-anchor-left">
            <img src="http://www.culebraislandvacationrentals.com/nonsaleable/images/tab/yamaha.png">
         </div>
         <!--:header-tab-anchor-left-->
      </div>
      <!--:header-tabs-->
   </div>
</body>

CSS

body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

#page {
    width: 900px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
}

#logo {
    width: 300px;
    height: 75px;
    background-color: #999;
    padding: 0;
    float: left;
}

#tab {
    width: 600px;
    height: 75px;
    background-color: #999;
    padding: 0;
    float: left;
}

#tab ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    line-height: normal;
}

#tab li {
    padding-top: 12px;
    float: left;
}

#tab a {
    display: block;
    height: 35px;
    margin-right: 1px;
    padding: 16px 40px 0px 40px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    border: none;
}

#header-tabs {
    width: 225px;
    height: 265px;
    background-color: #000;
    float: left;
    z-index: 5;
}

#header-tab-anchor-left {
    position: relative;
    left: 15px;
    top: 15px;
    z-index: 6;
}

问题是我希望“header-tab-anchor-left”div位于“header-tab”div的内部，这样页面底部的“Yamaha”图像就会出现坐在方框内的“新”标题下。

由于某些原因，我所能做的就是坐在盒子下面，而不是在里面。

在容器Div中对齐多个Div

0 个答案: