html中div高度问题

html中div高度问题,第1张

如果可以不考虑IE67可以用display:table布局:

HTML:

<div class="outer">

    <div  class="inner-title">

        A

    </div>

    <div class="inner-content">

        B

    </div>

</div>

CSS:

.outer{

    background-color:blue

    height:400px

    display: table

    width:100%

}

.inner-title{

    background-color:#CCC

    display:table-row 

    width:100%

    height:100px

}

.inner-content{

    background-color:#888

    display:table-row

    width:100%

}

IE6和IE7下估计只能用JS算高度

原理:

先给父级<div>设置宽度(像素)

然后再子<div>里,设置百分比,如图示。

代码原件:

<div style="width:80pxheight:50pxborder:#FF0000 3px solid"> <div style="width:20%height:50%border:#CC33FF 3px solid"></div> </div>

复制到<body></body>之间使用即可。

img{border:1px solid #CD171Adisplay:block}

可以解决多出来的高度。

其他的,我没太看明白你说的什么意思。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6116670.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存