html定位 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

html定位

<div class="ds-wp ds-mg ds-diaod-ct">
        <div class="ds-ct-top"></div>
        <div class="ds-ct-img"></div>
</div>

.ds-wp{width:1200px;}
.ds-mg{margin:0 auto;}
.ds-diaod-ct{position:relative;}
.ds-ct-img{position:absolute;background:url(../images/ds1.png) no-repeat center center;width:377px;height:357px;top:0px;left:-250px; }

我要是按照上面的写法整个1200px宽的div是自适应的,ds-diaod-ct不会被ds-ct-img这个div撑开,但是我要是把ds-ct-img设置成right:-250px;怎么整个ds-diaod-ct就出现横向滚动条了

展开
收起
杨冬芳 2016-06-17 16:43:28 1897 0
1 条回答
写回答
取消 提交回答
  • 杨冬芳
    IT从业

    题主的问题:“设置left:-250px,整个屏幕不会出现横向滚动条,整个屏幕是自适应的,要是设置right:-250px,整个屏幕就会出现滚动条,不再自适应了。这是为什么?”

    自适应是CSS的一种布局方式,不是指你说的“不可见”,有点不准确啊,O(∩_∩)O哈哈~

    默认情况下,浏览器进行页面布局基本过程是以浏览器可见区域为画布,左上角为(0,0)基础坐标,从左到右,从上到下从DOM的根节点开始画,题主描述的情况是有一部分内容超出了浏览器的可见区域,所以浏览器不绘制相应画面。

    可以设置html的方向html{direction:rtl;},这时候你就可以看到“设置left:-250px,整个屏幕会出现滚动条;设置right:-250px,整个屏幕不会出现滚动条”。

    参考:Web底层剖析,浏览器是如何工作的

    2019-07-17 19:43:07
    赞同 展开评论 打赏
问答标签:
问答地址:
问答排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载