亚洲综合无码无在线观看,亚洲av无码专区在线,亚洲乱亚洲乱少妇无码

何杨 — Tue, 30 Apr 2013 13:10:00 GMT

代码�Q?br />�Q�ｄｉｖ　ｃｌａｓｓ＝�Q��Q��Q�＞
�Q�ｉｍｇ　ｃｌａｓｓ＝�Q��Q�　ｓｒｃ＝�Q��Q�＂�Q?br />�Q�／ｄｉｖ＞

�Ҏ��Q?br />讄��ｄｉｖ与ｉｍｇ等高，�Ӟ��ｅｉｇｈｔ＝ｌｉｎｅ�Q�ｈｅｉｇｈｔ，�q�样�Q�ｍｇ就被Ｄ�Q�）夹在中间了．
再设�|�ｄｉｖ的ｍａｒｇｉｎ－ｔｏｐ＝ｍａｒｇｉｎ�Q�ｂｏｔｔｏｍ，�q�样上下外边距相�{�，ｉｍｇ就随着ｄｉｖ被夹在中间了．

何杨 2013-04-30 21:10 发表评论

何杨 — Fri, 26 Apr 2013 10:14:00 GMT

佉K��度自�?上部控制padding卛_��.
�C�Z��:
#XXX .XX .x{
      padding-top:20px;
      height:auto;
      ...
}

何杨 2013-04-26 18:14 发表评论

ZT:DIV高度自适应及应该注意的问题

何杨 — Thu, 25 Apr 2013 08:18:00 GMT

http://developer.51cto.com/art/201008/222367.htm

本文和大安��点讨��Z��下DIV高度自适应及注意问题，主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两�U�情��c�?/p>

DIV高度自适应及注意问�?/strong>

�U�篏了一些经验，�ȝ��Z��些关于div高度自适应的技巧，希望有助于大�Ӟ��转蝲��h��明出处，谢谢�?/p>
一、DIV高度自适应�Q�父div高度随子div的高度改变而改变）

1、如果父div不定义height、子div均�ؓ标准��的时候，父div的height随内容的变化而变�?实现父div高度随子div的高度改变而改变�?/p>
代码�Q?nbsp;

#aa{border:#000000solid5px}
#bb{border:#00ffffsolid5px;}
#cc{border:#0033CCsolid5px}
style>
父div
子divdiv>
子divdiv>
div>

效果�Q�IE、FF下一�?/p>

2、如果父div定义height,子div均�ؓ标准��的时候，在IE下父div的height随内容变化而变化，ff中则固定大小�Q�如父div讄��height:50px

代码�Q?nbsp;

#aa{border:#000000solid5px;height:50px}
#bb{border:#00ffffsolid5px;}
#cc{border:#0033CCsolid5px}
style>
父div
子divdiv>
子divdiv>
div>

IE效果

FF下效�?/p>

3、如果子div使用了float属性，此时已经��q��标准��，父div不会随内容的高度变化而变化，解决的办法是在��Q动的div下面�Q�加一个空div�Q�设�|�clear属性both

未加�I�div代码�Q?nbsp;

#aa{border:#000000solid5px;}
#bb{border:#00ffffsolid5px;float:left}
#cc{border:#0033CCsolid5px;float:left}
style>
父div
子divdiv>
子divdiv>
div>

IE效果�Q?/p>

FF效果�Q?/p>

修改后代码：

#aa{border:#000000solid5px;}
#bb{border:#00ffffsolid5px;float:left}
#cc{border:#0033CCsolid5px;float:left}
style>
父div
子divdiv>
子divdiv>
div>
div>

修改后效果：IEFF一�?/p>

4.另类的DIV高度自适应
原理:
padding-bottom��列拉长变的一样高�Q�而负的margin-bottom又��其回到底部开始的位置�Q�同�Ӟ��溢出部分隐藏掉了。此�Ҏ��必须加文档信息才能正常显�C?br /> 代码�Q?nbsp;

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

#aa{border:#000000solid5px;overflow:hidden;}
#bb{border:#00ffffsolid5px;float:left;
padding-bottom:100000px;margin-bottom:-100000px;}
#cc{border:#0033CCsolid5px;float:left;
padding-bottom:100000px;margin-bottom:-100000px;}
#dd{float:left}
style>

子divdiv>
子divdiv>
子div

div>
div>

效果�Q?/p>

二、DIV高度自适应�Q�子div高度随父亲div高度改变而改变）

在有�Ҏ��的情况下�Q�你会发现同一个div,在IE下的高度和在FF下的高度是不一��L��Q�比如你讄��了高度�ؓ100px的div�Q�边框是 border:5px;IE的高度是5+5+�I�白区域=100px�Q�而FF下高度是100px的div是不包括高度的，只是�I�白区域的高度，如下��N��框的部分:

黑框的上�Ҏ��寚w��的，但是讄��了同��L��高度�Q�效果却不一��P��代码如下�Q?/p>

#aa{border:#000000solid5px;height:100px;}

#bb{border:#00ffffsolid5px;float:left;height:100%}

#cc{border:#0033CCsolid5px;float:left}

style>

子divdiv>

子divdiv>

div>

如果没有讄��Ҏ��Q�完全没有高度不一致的情况�Q�子div适应父div很简单，如上面代码，只是在子div加了height:100%属性即可。如�?讄��了边框，可以把子div的高度设�|��ؓ比父div��上下边框高度的��|��比如在此例中�Q�可�?bb中height改�ؓ100-5-5�Q?0px�Q�结果在 IE和Mozilla中显�C�Z��致�?/p>
有一点要注意�Q�如果父div是body的话�Q�也��是说一个body套了一个div�Q�让div适合body的大��的�Q�必��设�|�body的高度才能实现子div随body改变而改变，body{height:100%}

何杨 2013-04-25 16:18 发表评论

何杨 — Mon, 22 Apr 2013 10:13:00 GMT
适用于IE和FF

父Div中设�|?br />    text-align:center;

子Div中设�|?
    margin-left:auto:
    margin-right:auto;
�?br />    marigin:0 auto;

何杨 2013-04-22 18:13 发表评论

URL重写后CSS失效时的处置

何杨 — Fri, 20 Apr 2012 04:04:00 GMT
在Web�E�序中，url重写后后会出现CSS失效的情况，即页面元素都在，但给它们加上的样式都无效了�?br />
原因�Q?br />一般是加蝲CSS文�g的�\径在��页后处于错误的位置�Q�这时可以用FireFox打开�|�页�Q�查看网��|��码，再点击CSS下方的链接，看是否能链接到CSS文�g�Q�链接不到是报错的�?br />
处置�Q?br />在html开始前加上如下代码�Q?br />
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
    <head>
        <base href="<%=basePath%>">
        <title>XXXtitle>

    head>

接下来其它的CSS�Q�JS�Q�IMG写好相对地址��好了�?img src ="http://m.tkk7.com/heyang/aggbug/375344.html" width = "1" height = "1" />

何杨 2012-04-20 12:04 发表评论

何杨 — Tue, 14 Feb 2012 07:31:00 GMT
通常�Q�我们可以如下所�C�制作横向菜单：
#commonUsedDocumentContainerDiv ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    vertical-align:middle  ;
}

#commonUsedDocumentContainerDiv li a{
    width:130px;
    height:75px;
    line-height:32px;

    font-family:"宋体","Tahoma";
    font-size:14px;
    font-weight:bold;
    color:#000000;

    text-decoration:none;
    text-align:left;

    background:#ffffff;
}

#commonUsedDocumentContainerDiv li a:hover{
    width:130px;
    height:75px;
    line-height:32px;

    font-family:"宋体","Tahoma";
    font-size:14px;
    font-weight:bold;
    color:#0000ff;

    text-decoration:none;
    text-align:left;

    background:#ffffff;
}

�q�样做，在FF或是ie8以上的版本中�Q�都没有问题�Q�但是ie6有问题，具体上看来本来应该是一横排的菜单变成了阶梯�Ӟ��一下子��难看了�?br />
�q�是因�ؓie6对ul/li的解释方式所��_��要解册��个问题也很简单，对li的样式也�q�行讄��p��了，如下的粗体部分：
#commonUsedDocumentContainerDiv ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    vertical-align:middle  ;
}

#commonUsedDocumentContainerDiv li{
    float:left;
    display:block;

    width:130px;
    height:75px;

    background:#ffffff;
}

#commonUsedDocumentContainerDiv li a{
    width:130px;
    height:75px;
    line-height:32px;

    font-family:"宋体","Tahoma";
    font-size:14px;
    font-weight:bold;
    color:#000000;

    text-decoration:none;
    text-align:left;

    background:#ffffff;
}

#commonUsedDocumentContainerDiv li a:hover{
    width:130px;
    height:75px;
    line-height:32px;

    font-family:"宋体","Tahoma";
    font-size:14px;
    font-weight:bold;
    color:#0000ff;

    text-decoration:none;
    text-align:left;

    background:#ffffff;
}

另外需要注意的是，li a和li a�Q�hover中照样可以设�|�display:block,如果li a 或者li a�Q�hover 有背景还非得如此不可�Q�这和网上流传甚�q�的�Ҏ��不一��P��看来知识不能拿来��q��Q�还需要自己尝试一下�?img src ="http://m.tkk7.com/heyang/aggbug/369946.html" width = "1" height = "1" />

何杨 2012-02-14 15:31 发表评论

使用css的overflow属性来控制滚动条的隐藏

何杨 — Tue, 14 Feb 2012 07:19:00 GMT
先看代码�Q?br />
#contentContainer{
    margin-top:10px;
    padding:0px;
    border:0px solid #336699;

    width:100%;

    overflow-x:hidden;
}

当div的宽度基本和��览器可控宽度一致时�Q�滚动条��׃��出现�Q�最�ȝ��的是会出��C��个，一个div的，一个浏览器的�?br />
�q�时�Q�可以如上所�C�，��超出部分隐藏，�q�样滚动条就不会出现了�?br />
IE上效果是滚动条彻底没有，但是FF只是把滚动条�|�灰�Q�两者还是有区别的�?img src ="http://m.tkk7.com/heyang/aggbug/369943.html" width = "1" height = "1" />

何杨 2012-02-14 15:19 发表评论

�l�Div加上��过宽度自动折行处理

何杨 — Tue, 14 Feb 2012 07:13:00 GMT

#detailInstructionContentDiv{
    margin:0px;
    padding-top:10px;
    padding-left:22px;

    border:0px solid #336699;

    width:150px;
    height:230px;

    text-align: left;

    font-family:"宋体","Tahoma";
    font-size: 12px;
    font-weight:normal;
    color:#333333;

    white-space:normal;
}

见以上粗体部分，比wordbreak之类的好用得多�?br />

何杨 2012-02-14 15:13 发表评论

亚洲综合无码无在线观看,亚洲av无码专区在线,亚洲乱亚洲乱少妇无码

ZT:DIV高度自适应及应该注意的问题

URL重写后CSS失效时的处置

使用css的overflow属性来控制滚动条的隐藏

�l�Div加上���过宽度自动折行处理

�l�Div加上��过宽度自动折行处理