右边盒子css布局问题

来源:7-3 圣杯布局的解决方案

志在天堂

2019-12-21 18:12

http://img2.mukewang.com/5dfdefe10001bd5404440113.jpg

右边盒子我们有用定位,这样也可以实现圣杯布局,和老师说的有区别,这样可行吗?

写回答 关注

2回答

  • ccyy_阿亮
    2020-11-19 20:31:29

    左浮动元素设置左右外边距的区别:设置左外边距会有位移,而设置右外边距没有位移(其实会影响下一个浮动元素的位置),相同点就是负值达到浮动元素原本宽度后可能就跳到上一行了。

    跳到上一行是有前提的,具体去查浮动规则,前面有一节视频中右盒子上不去的原因也可以查浮动规则。右浮动设置左右外边距也类似,自己可以写个例子试试。

    你的右盒子margin-right设为-300px;就可以了。设置的100%,极端情况下会有问题,比如父元素宽度小于右盒子宽度。


    ccyy_阿...

    补充一下,外边距正值也可能跳行,外边距和浮动元素加起来不够在这一行展示时会跳到下一行。 不管向上跳还是向下跳,都只跳一行,受到浮动规则所限制。 左浮动设置左外边距,跳行前后都能继续位移;但是左浮动设置右外边距,跳行前后不做位移只在临界点时跳行。

    2020-11-20 00:26:35

    共 1 条回复 >

  • 芈峰
    2019-12-22 14:50:24

    老师说的只是几种方式 能实现同样效果有很多方式 找到一种能决绝项目的就可以了

一课全面掌握主流CSS布局

一网打尽CSS主流布局方案,一步掌握页面布局技巧.

5276 学习 · 60 问题

查看课程

相似问题