html - 如何在 Logo 上将页面的中间部分向上拉，但保持背景向下？

Question

我尝试将页面的中心部分放在 Logo 图像上。但没有背景颜色。我想出的唯一方法是通过插入一个空白空间来保持背景低的 hacky 方式。我什至不知道为什么这个工作..

所以我的问题是，它为何有效以及如何以不那么棘手的方式进行操作？

那么为什么这条线:<!-- push me up workaround --> &nbsp; <!-- push me up workaround -->允许我将背景推低吗？

页面示例:http://tinyurl.com/kp8clnd

<div id="theBodyContent">
    <!-- push me up workaround --> &nbsp; <!-- push me up workaround -->
    <div class="pushMeUp content-interior">
        <div id="theBody" class="content">
            <div class="interior-table">
                <div class="interior-table-cell leftcell">
                    <div class="leftinner">
                        <a href=""><img src="images/interior-directions.png" style="width: 95%; height: auto;"></a>
                    </div>
                </div>
                <div class="interior-table-cell rightcell">
                    <div class="rightinner">
                        Some content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

#theBodyContent {
    width: 100%;
    background-color: #dac79d;
}
.pushMeUp {
    margin-top: -217px;
    background-color: #dac79d;
}
#theBody {
    margin-top: -30px;
}
.content {
    position: relative;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

您可以添加 inline-block元素代替:

<div id="theBodyContent">
  <!-- here add a div with display inline block -->
  <div style="display: inline-block;"></div>      
  ...

备选方案 <br />工作原理相同。