发新话题
打印

DIV CSS网页技巧:网页布局中border断线现象

本主题由 joe 于 2008-4-17 13:27 移动
您是本帖第496个浏览者

DIV CSS网页技巧:网页布局中border断线现象




  如果容器内有两个浮动,并用CLEAR清除浮动。在ie下拖动滚动条时最外层的border会消失,如果给最外层加上宽度或者高度就不会出现。这是一个奇怪的现象,目前还不能解释是什么原因所导致的。看下面的示例:
<div style="margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%">
    <div style="float:left">
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />

       网页标准化过程中一些理论<br />
    </div>
    <div style="float:right">
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
    </div>
    <div style="clear:both"></div>
</div>
   [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
  我们可以通过下面的办法解决:
   1.在父元素中加入height:1%
   2.加入一个宽度
   3.加入一个背景色
 看下面的例子,我们给父元素加上一个宽度就搞定了:
<div style="width:660px; margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%">
    <div style="float:left">
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
    </div>
    <div style="float:right">
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
       网页标准化过程中一些理论<br />
    </div>
    <div style="clear:both"></div>
</div>
   [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


TOP

发新话题