Question

我只是打了一个似乎是一个bug或至少是一个非常奇怪的CSS / HTML功能。现在，问题是我连续三个div，都在父div中。

第一个和第二个应该是类似聊天的文本容器。最后一个应该被排除在外，并且是一个分页导航。

在第一页上，这很好用。在其他每个页面上，最后一个文本容器div扩展了导航。使用Chrome开发人员工具时，它会向我显示第二个div仅具有其实际大小，而背景仍然在导航上展开。但是，如果我删除导航，第二个文本容器将调整为其实际大小。此外，使用时

position:absolute;

它没有扩展。将位置设置为相对明确没有解决问题并将背景颜色设置为其他没有改变白色背景。

我在jsfiddle.net下快速演示了你。 所以最后一个问题是：为什么第二个文本div会扩展？或者它不是，但看起来确实如此？

// edit：正如评论中所建议的，这里是jsfiddle之外的原始CSS / HTML。我仍然不认为这是一个好主意，但如果你这样说..

<div class="decoded_chat" pagenr="1" style="display: block;">
  <div class="decoded_user decoded_user_first" isme="0">

    <a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">

      <img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">

      <div class="decoded_user_name">
        Zuckerberg
      </div>

    </a>

      <div class="decoded_msg_date">
        02.02.2014, 01:36 Uhr
      </div>
      <div class="decoded_msg">
        I will listen to the songs when I'm not so tired
      </div>
      <div class="decoded_msg">
        I don't know.. Possibly
      </div>
      <div class="decoded_user decoded_user_last" isme="0">

        <a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">

          <img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">

          <div class="decoded_user_name">
            Zuckerberg
          </div>

        </a>

        <div class="decoded_msg_date">
          02.02.2014, 01:33 Uhr
        </div>
        <div class="decoded_msg">
          I've been ill all week.. Just haven't had time for much
        </div>
        <div class="decoded_chat_pager">
          <a href="javascript:void(0);" pagenr="0" class="cloudview_msg_prev">
            « Vorherige Seite
          </a>
          <a href="javascript:void(0);" pagenr="2" class="cloudview_msg_next">
            Nächste Seite »
          </a>
        </div>
      </div>

a {
    text-decoration: none;
    color: white;
}
.chat_list {
    width:100%;
}
.decoded_chat {
    text-align:left;
    width:100%;
    margin:auto;
    background-color:white;
    color:black;
    border-radius:10px;
}
.cloudview_msg_next {
    float:right;
}
.decoded_chat_pager {
    margin:auto;
    margin-top:5px;
    text-align:left;
    width:95%;
}
.decoded_msg {
    margin-bottom:3px;
}
.decoded_user {
    padding:15px 10px;
    min-height:50px;
}
.decoded_user_last {
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
.decoded_user_first {
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
.decoded_user_name {
    color:black;
    margin-bottom:5px;
}
.mychatmessage {
    background-color:#BFF2BF;
}
.decoded_msg_date {
    float:right;
    color:grey;
    margin-top:-30px;
}
.decoded_user_avatar {
    position:absolute;
}
.decoded_user_name {
    font-weight:bold;
}
.decoded_user_name, .decoded_msg {
    margin-left:64px;
}
table {
    text-align:center;
}
.flipped-180 {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter:"FlipH";
}
#detailopener, #return_to_msg, #return_to_cloud, #cloudview_delete {
    display:none;
}
.chat_list_names {
    color:grey;
}
.invi {
    position:fixed;
    width:1px;
    height:1px;
    top:-2000px;
    left:-2000px;
}
.next_page_chat_list {
    text-align:right;
    padding-right:5px;
}
.last_page_chat_list {
    padding-left:5px;
    text-align:left;
}
.loadingtext {
    margin-top:7px;
}
#opener {
    position:fixed;
    left:25px;
    bottom:25px;
    cursor:pointer;
    display:none;
}
.dontdroponme {
    opacity:0.3;
}
#dropper {
    position:fixed;
    right:25px;
    bottom:25px;
    cursor:pointer;
    display:none;
}
.dropinfo {
    border-radius:7px;
    color:white;
    padding:5px 25px;
}
.dorpinfo img {
    width:48px;
}
.chatlist_button img, .decoded_user_avatar {
    box-shadow:0 0 5px #888;
    border-radius:5px;
}
.chatlist_button {
    background-color:white;
    border-radius:5px;
    box-shadow:0 0 5px #888;
    padding:5px;
    cursor:move;
    max-width:200px;
    margin:auto;
}
.ui-draggable-dragging {
    position:absolute;
    z-index:5;
}
body {
    height:100%;
    margin:0;
    background-color:#3B5998;
    color:white;
    font-size:12px;
    font-family:Calibri;
}
#innerbody {
    margin:auto;
    width:55%;
    text-align:center;
}
#innerbody_floater {
    height:50%;
    width:100%;
    margin:0;
}

Answer 1

从http://www.w3schools.com/css/css_positioning.asp

复制

绝对位置元素相对于具有静态位置的第一个父元素定位。如果找不到这样的元素，则包含的块是html：

DIV扩展到下面的DIV

1 个答案: