Question

我甚至不知道我的问题是什么，但我会尽力解释它。

基本上我所拥有的是两列布局。左侧是内容，目前仅包含h1和填充文本。右边是侧栏，里面应该有一个div（userinfobox）。

该框的标题文本应该在框外面，所以我有userinfobox position: relative和标题文本position: absolute 然后，在框内的那个下面，有一个150x150的图像，然后是下面的一些文字。

这是HTML：

<!-- Main Content -->
<div id="contentwrapper" role="presentation">
    <div id="content" role="main">
        <h1>Header</h1>
        Content <a href="#">link</a>
    </div> <!-- content div -->

    <!-- Sidebar -->
    <div id="sidebar" role="complementary">
        <div id="userinfobox">
            <p id="header">User Info</p>
           <div id="userinfo">
           <div id="avatar"><img src="" id="tag" alt="tag" /></div>
            <p class="username">Username #</p>
            <p id="icons">Icons</p>
            <p id="membersonline"><a href="membersonline.php">Online Members (#)</a></p></div>
        </div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
    </div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->

然后是CSS

    /* Main Content */

     #contentwrapper {
        min-height: 400px;
        height: 100%;
        position: relative;
        display: table;
        font-size: 1em;
    }

    #content {
        width: 669px;
        height: 100%;
        padding: 20px;
        position: relative;
        display: table-cell;
        background-color: #F7F8F7;
        text-align: left;   
    }

    #content h1 {
        margin-bottom: 20px;
        font-size: 2.75em;
        line-height: 1em;
    }

    /* Sidebar */

    #sidebar {
        width: 234px;
        height: 100%;
        padding: 20px;
        position: relative;
        color: #0D130D;
        background-color: #FDEBCF;
        display: table-cell;
        text-align: center;
 }
 #sidebar p#header {
    position: absolute;
    top: -10px;
    font-size: 1.5em;
    line-height: 1em;
    text-align: left;
    overflow: hidden;
}

#sidebar p {
    max-width: 214px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

/* Logged In Sidebar */

#userinfobox {
    width: 214px;
    max-width: 214px;
    padding: 10px;
    position: relative;
    background-color: #F7F8F7;
}

#avatar, #tag, #userinfo {
    margin: 0 auto;
    position: relative;
    display: block;
    outline: 1px solid #000;
    overflow: hidden;
}

#avatar, #tag {
    width: 150px!important;
    height: 150px!important;
}

应该正在工作，我不明白为什么它不会成为现实。实际上它正在工作，侧边栏无论如何都在做它应该做的事情。但有时它会压缩内容（目前是h1和两个文字），几乎到150x150图像底部的位置。

我将尝试列出导致它执行此操作的条件：

在

时，不工作

头像div完全为空标题为position: absolute

图片的标识为，标题为position: absolute

但是，当确实时（看起来不管标题的绝对位置）：

图片的src为空

在头像div中没有图像，只有文字（即整个userinfo div中只有文字）

userinfo div完全为空

我只是不明白它是如何在完全不同的div中影响某些东西的。我试图搜索过的每个地方都谈到了相对定位的元素中绝对定位的元素如何不会影响外部的任何内容以及如何使用它们。另外，这是一个固定宽度的设置，所以它的宽度根本不变;它也不是基于百分比。

Answer 1

由于您的#content div正在使用display:table-cell;，因此您还必须应用vertical-align:top;以防止您的内容居中：

http://jsfiddle.net/R8zAw/3/

#content {
  width: 669px;
  height: 100%;
  padding: 20px;
  padding-top: 0;
  position: relative;
  display: table-cell;
  background-color: #F7F8F7;
  text-align: left;
  border-bottom-left-radius: 5px;
  vertical-align: top; /* add this */
}

绝对定位（具有相对位置容器）与图像或其下的任何内容都影响其他div

1 个答案: