首页 新闻 会员 周边

css问题定位问题

0
悬赏园豆:10 [已解决问题] 解决于 2013-03-14 17:13

父级相对定位不设置高度 子级绝对定位 有可能父级自适应高度吗?

我真不会起的主页 我真不会起 | 初学一级 | 园豆:151
提问于:2012-11-02 17:29
< >
分享
最佳答案
0

ul:after,p:after,div:after,li:after{content:"";display:table;clear:both}  高度自适应 也就是自动撑开,参考代码,腾讯, 163 ,sina,sohu 几大网站都这样的 ,去看下腾讯首页的源码 就知道了

收获园豆:10
世界万物 | 菜鸟二级 |园豆:276 | 2012-11-02 19:24

呃 我也不太明白你说的 我给你弄一下 我的代码 你看一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box{ position:relative; height:auto; width:200px; border:1px solid #ccc;}
.box .div1{ position:absolute; height:200px; width:100px; border:1px solid #000;}

</style>
</head>

<body>
<div class="box">
<div class="div1"></div>
</div>
</body>
</html>

我真不会起 | 园豆:151 (初学一级) | 2012-11-02 20:56

@我真不会起: sorry, 开始我理解错你的意思了,子div 绝对定位 已经脱离了 原来的文档流,我也不知道怎么弄了。

世界万物 | 园豆:276 (菜鸟二级) | 2012-11-02 21:08

@我真不会起:  既然你绝对定位了 就无所谓父子了

世界万物 | 园豆:276 (菜鸟二级) | 2012-11-02 21:17

@我真不会起: 我做自适应一般是用百分比和继承来设置宽高的,我试了一下,对绝对定位是不起作用的

AngelGong | 园豆:254 (菜鸟二级) | 2012-11-05 18:10
其他回答(2)
0

子元素绝对定位,就脱离了原来的文档流,父元素不能再根据绝对定位的子元素自适应宽高了,可以用js来动态设置

for certain | 园豆:324 (菜鸟二级) | 2012-11-02 18:05

js控制.....

支持(1) 反对(0) 我真不会起 | 园豆:151 (初学一级) | 2012-11-02 18:11

@我真不会起: js获取的绝对定位子元素的宽高,来以此来设置父元素的宽高

支持(0) 反对(0) for certain | 园豆:324 (菜鸟二级) | 2012-11-02 18:13

@for certain: 我知道js怎么做 但是我想的是css可能实现吗

支持(0) 反对(0) 我真不会起 | 园豆:151 (初学一级) | 2012-11-02 20:50
0

不会自适应的亲

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .div_rel
        {
            position:relative;
            border:1px solid #ccc;
        }
        .div_abs
        {
            position:absolute;
            left:300px;
            border:1px solid #fbb;
        }
    </style>
</head>
<body>
    <div class="div_rel">
        <div class="div_abs">
            <h1>绝对定位自适应测试</h1>
        </div>
         <h1>可以把这句删掉试试看</h1>
    </div>
</body>
</html>

AngelGong | 园豆:254 (菜鸟二级) | 2012-11-02 18:08

做不到

支持(0) 反对(0) 我真不会起 | 园豆:151 (初学一级) | 2012-11-02 18:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册