至于为何是2000px宽,那是因为现在的屏幕也就1920px是常规,很少大于 2000px的屏幕浏览网页。所以考虑到这些问题,设置的宽,比最大值大一点,也就凑个整数,没啥刻意的。
你要想的话,也可以大于2000px;反正越大越好。
你要想的话,也可以大于2000px;反正越大越好。
2020-03-12
display: table-cell; *display: inline-block; width: 2000px; *width: auto;
不要理这么多,把它当规范,当成这种布局的公式,跟随张大佬的脚步。
不要理这么多,把它当规范,当成这种布局的公式,跟随张大佬的脚步。
2020-03-12
关于为何 display: table-cell; width: 2000px; 为何要设置这么长,我查到了:
在本例demo中,右侧内容足够多,所以宽度完整的撑开了,如果内容有限,则宽度就是内容的宽度,此时想要让某个元素(例如关闭按钮)右侧定位就会有问题,解决方法就是定义一个非常宽的宽度,就像上面facebook截图中的CSS属性一样
传送门:https://www.jianshu.com/p/a1cf75448b43
在本例demo中,右侧内容足够多,所以宽度完整的撑开了,如果内容有限,则宽度就是内容的宽度,此时想要让某个元素(例如关闭按钮)右侧定位就会有问题,解决方法就是定义一个非常宽的宽度,就像上面facebook截图中的CSS属性一样
传送门:https://www.jianshu.com/p/a1cf75448b43
2020-03-12
这里,关于右浮动带来的ie7兼容问题的解决方法
①不改变dom,给“左侧”套上元素标签,并左浮动,形成左右浮动
<div>
<span style="float: left">左侧</span>
<span style="float: right">右侧</span>
</div>
②改变dom位置,也就是将右浮动的元素放到前面:
<div>
<span style="float: right">右侧</span>
左侧
</div>
①不改变dom,给“左侧”套上元素标签,并左浮动,形成左右浮动
<div>
<span style="float: left">左侧</span>
<span style="float: right">右侧</span>
</div>
②改变dom位置,也就是将右浮动的元素放到前面:
<div>
<span style="float: right">右侧</span>
左侧
</div>
2020-03-09
第二个,按照文档流布局,确实dom没有变,因为如果不添加float。
那么div(文本区)+a(头像图)是上下,正常的布局。
然后因为float了,所以两者可以共享一行了。
为什么说第一个dom变了,因为,正常文档流,是从上到下,从左到右的,但是a(头像图),把它放到前面了,就,效果是从左到右,但是dom却是从右到左
那么div(文本区)+a(头像图)是上下,正常的布局。
然后因为float了,所以两者可以共享一行了。
为什么说第一个dom变了,因为,正常文档流,是从上到下,从左到右的,但是a(头像图),把它放到前面了,就,效果是从左到右,但是dom却是从右到左
2020-03-09