开发者社区> 问答> 正文

html定位

杨冬芳 2016-06-17 16:43:28 863
<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就出现横向滚动条了

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:43:07

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

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

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

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

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

    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章