0

我有一个无法正确显示的对话框，但我不知道为什么。该对话框由几个 div 组成。

该对话框由一个父 div 组成，其中包含标题、正文和页脚的三个子 div。每个子 div 进一步分为左、中、右 3 个子子 div。我无法弄清楚为什么我的左页脚 sub sub div 出现在右侧 body sub sub div 的右侧。

我已经简化了下面的 html，因此结构清晰。

<div class="dialog">
  <div class="titlebar">
    <div class="titlebarleft">
    </div>
    <div class="titlebarcenter">
    </div>
    <div class="titlebarright">
    </div>
  </div>
  <div class="con">
    <div class="conleft">
    </div>
    <div class="concenter">
    </div>
    <div class="conright">
    </div>
  </div>
  <div class="footer">
    <div class="footerleft">
    </div>
    <div class="footercenter">
    </div>
    <div class="footerright">
    </div>
  </div>
</div>

大多数 CSS 与 3 个主要部分（标题栏、正文、页脚）中的每一个都相同

标题：

.titlebar {
    height: 38px;
    width: 100%;
}

内容：

.con {
    background: url("../images/dialog/vertical.png") repeat-y scroll 0 0 #FFFFFF;
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    width: 100%;
}

页脚：

.footer {
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    height: 37px;
    width: 100%;
}

这是左页脚CSS：

.footerleft {
    background: url("../images/dialog/static.png") no-repeat scroll 0 -83px transparent;
    float: left;
    height: 100%;
    width: 9px;
}

这是问题的图片： http: //s9.postimage.org/ebj6w7ynj/Dialog_Corner.jpg

4

1 回答 1

2

所有 div 元素都是 display:inline 。所以如果你在一个 div 元素之后写一个 div ，父元素的宽度会将 div 换成新行（如果两个 div 宽度大于父宽度）。现在您可以将 clear:both (floats) 设置为 .footer 类以在此元素之前换行。 

.footer {
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    height: 37px;
    width: 100%;
    clear:both;
}

但我不确定这适用于所有浏览器。

于 2013-01-11T21:06:20.207 回答