设置了absolute的元素，没设置宽度，那他的宽度是由内容决定的。那还怎么自适应宽度呢？

已经糊涂了。。

a渔

2015-12-09

源自：网页布局基础 4-3

关注问题我要回答

4178

操作

收起

7 回答

李晓健
2015-12-09

<!DOCTYPE  HTML>
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xxxx</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            background: #06f;
            height: 500px;
            width: 200px;
        }
        .box2{
            background: #3c0;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box1">cccccccccc</div>
<div class="box2">dddd dddd dddd dddd dddd dddd发dddd dddd dddd dddd dddd dddd dddd dddd dddd dddd dddd dddd dddd dddd发dddd dddd dddd dddd dddd dddd dd dddd dddd dddd dddd dddd dddd发dddd dddd dddd dddd dddd dddd dd</div>
</body>
</html>

内容放到足够多就行了

0 回复有任何疑惑可以回复我~

#1

a渔提问者

恩！原来是这样啊，明白了。谢谢你呀~ 非常非常感谢\(≧▽≦)/

2015-12-09 回复有任何疑惑可以回复我~

echo_kinchao
2015-12-09

如果不是块级就是由内容撑开的

0 回复有任何疑惑可以回复我~

#1

a渔提问者

恩恩，知道啦O(∩_∩)O~

2015-12-09 回复有任何疑惑可以回复我~

周小事
2015-12-09

根据内容改变宽度就叫自适应宽度啊....>__<

题主到底要问什么？？

0 回复有任何疑惑可以回复我~

#1

a渔提问者

不是根据窗口吗？

2015-12-09 回复有任何疑惑可以回复我~

#2

a渔提问者

就是三楼贴的代码的效果。

2015-12-09 回复有任何疑惑可以回复我~

a渔提问者
2015-12-09

课程里的。。

0 回复有任何疑惑可以回复我~

#1

你给一下他的完整代码看一下。

2015-12-09 回复有任何疑惑可以回复我~

#2

a渔提问者回复李晓健

这个看不到。。/(ㄒoㄒ)/~~ 那个老师说，“relative--父元素相对定位；absolute--自适应宽度元素绝对定位” 《网页布局基础》

2015-12-09 回复有任何疑惑可以回复我~

#3

李晓健回复 a渔提问者

我刚才去看过他那节视频了，他的可以自适应是因为他的内容足够多，可以撑满一行，所以他就看起来是自适应了，你把你的那个div里的多放一点内容也可以做到他那种效果。

2015-12-09 回复有任何疑惑可以回复我~

李晓健
2015-12-09

<!DOCTYPE  HTML>
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xxxx</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            background: #06f;
            height: 500px;
            width: 200px;
            position: absolute;
            left: 0;
            top:0;
        }
        .box2{
            background: #3c0;
            height: 300px;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">cccccccccc</div>
    <div class="box2">dddddddd</div>
</body>
</html>

你可以试试这样写

0 回复有任何疑惑可以回复我~

#1

a渔提问者

不是对自适应宽度的元素设置绝对定位吗？

2015-12-09 回复有任何疑惑可以回复我~

#2

a渔提问者

有节课老师的讲述，我贴图了，你可以看看吗？o(╯□╰)o 不明白

2015-12-09 回复有任何疑惑可以回复我~

Leesonth
2015-12-09

自适应宽度

0 回复有任何疑惑可以回复我~

#1

a渔提问者

不要搞笑嘛。。o(╯□╰)o

2015-12-09 回复有任何疑惑可以回复我~

李晓健
2015-12-09

给一下具体的代码看一下。

0 回复有任何疑惑可以回复我~

#1

a渔提问者

贴代码和图了。

2015-12-09 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

网页布局基础

参与学习 214704 人
解答问题 1756 个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

设置了absolute的元素，没设置宽度，那他的宽度是由内容决定的。那还怎么自适应宽度呢？

我要回答关注问题

意见反馈帮助中心 APP下载