html - 为什么我的 CSS 不合作？

Question

好吧，也许我有点失去理智，但我正在尝试重新创建一个将 2 个背景图像合并到我的 CSS 中的主页。我试图将一个用作顶部图像，一个用作底部图像，中间是一个包含链接和图像的表格。但是，出于某种原因，我很难将它们组合在一起以使其看起来像一个平滑的图像。

例如，我的容器类(如下所示)只在 topBox 类周围放置了一个边框，而不是整个容器 div。我希望所有 3 个 div 都有一个边框(来自容器类)，这样它看起来就像是一个图像。这是我的 HTML 和 CSS。

我做错了什么？在此先感谢您的帮助!

     #Container {
       float:left;
        width: inherit;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        border:1px solid #000000;
      }


      .boxTop {
        position: relative;
        left: 100;
        top: 100;
        width: inherit;
        height: 95px;
       background-image:     url(http://ejgh.org/templates/ejgh/images/HL_logo.jpg);
        background-repeat: no-repeat;
        /*place background image css code here and remove line above*/
           background-position: left 0px top 0px;
    background-size: 300px;

      }

      .box {
        position: relative;
        left: 100;
        top: 100;
        width: 350px;
        height: 550px;
        border:0px solid #000000;
}

      .boxBtm {
        position: relative;
        left: 100;
        top: 100;
        width: inherit;
        height: 95px;
        background-image: url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
        /*place background image css code here and remove line above*/
        background-repeat: no-repeat;
           background-position: left 0px bottom 0px;
    background-size: 300px;
      }

<div id="Container">
    <div class="boxTop"></div>
    <div class="box"><table width="300px">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/apple.jpg" alt="Image of Apple and Weights for homepage" width="86" height="86" /></a></td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/become-a-member-sp-1672965733">Become a Member</a></h3>
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</td>
</tr>
<tr>
<td valign="top"><a href="/component/wrapper/?Itemid=203"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/elderlycouple.jpg" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="86" height="83" /></a></td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/classes-support">Classes &amp; Support</a></h3>
<p>Learn more about the classes, support groups, and health screenings we offer.</p>
</td>
</tr>
<tr>
<td valign="top"><a href="/component/hwdvideoshare/?task=viewcategory&amp;Itemid=166&amp;cat_id=5"><img style="border-width: 0px;" src="http://ejgh.org/images/stories/template/healthylifestyles/tvspot.jpg" alt="Image of Liz Delsa Healthy Lifestyles Host" width="86" height="70" /></a></td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-tv">Watch the TV Segment</a></h3>
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</td>
</tr>
<tr>
<td valign="top"><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine"><img src="http://ejgh.org/images/stories/yourhealthimages/healthylifestyles/MagazineCovers/summer2016.jpg" alt="Summer 2016 Healthy Lifestyles Cover" width="86" height="100" /></a></td>
<td valign="top">
<h3><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine">Read the Magazine</a></h3>
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
          </table></div>
    <div class="boxBtm"></div>
 </div>

Answer 1

非常简单的答案，只需删除 id #Container 的高度即可。我希望这就是您要找的东西 ;)