横向布局

用于对页面内容进行横线划分,把内容划分成一栏(列)或多栏(列)。针对不同使用场景,有两种横向布局方式。

横向固定布局

列的宽度为实际指定的宽度,不随内容的变化而变化,一般用于整体页面的布局。

侧边栏,一般放菜单
内容区域
                            
                        

横向自适应布局

可以指定某一列的宽度为自适应。有两种常用的使用场景。 一种是代替float布局,实现两端对齐,一种是用于内容列表的列表项内部分栏布局。

两端对齐

我在左边,我可以自适应充满剩余宽度
                            
                        

自适应列文本超出自动显示省略号

我是很长很长很长很长很长很长很长很长的标题,当屏幕变窄时,显示不下的内容会被截掉并且显示省略号。

                            
                        

table-layout:auto 布局下的 td 内容截取问题

table-layout:auto 布局下的 td 内容截直接应用 t-ell 是没有效果的。需要借助 cell-ell 才可以。还要注意,cell-ell 只是包裹元素,文本需要写在该元素内嵌的元素内。如上示例所示。