实现了单元格布局的左侧宽度、右侧宽度和单元格的左右宽度

使用表格单元格完成以下布局(IE8及以上)

1,左侧宽度-右自适应


xml代码将内容复制到剪贴板。


左{。
宽度:300px;
身高:500px;
border: 1px solid;
浮点数:左;
}
右{。
宽度:10000px;
身高:500px;
显示:表单元格;
border: 1px solid;
}





乱数假文悲哀坐特,consectetur adipisicing精英。beatae痛苦EST,beatae,它也被称为对与错。







结果如下:


(调整窗口的大小以测试是否根据窗口大小更改了权利)
2,右侧宽度-左自适应

xml代码将内容复制到剪贴板。



右{。
宽度:200px;
身高:500px;
border: 1px solid;
显示:表单元格;
}
左{。
身高:500px;
border: 1px solid;
显示:表单元格;
}
母{。
显示:表;
表布局:固定;
宽度:100%;
}




乱数假文悲哀坐特,consectetur adipisicing精英。Amet aperiam,assumenda,阿梅德,consectetur。









结果如下:


它和左边的宽度有点不同。虽然它只是一个固定的宽度,它不能直接与浮像左割让宽度。
3,左右宽度-中间自适应

xml代码将内容复制到剪贴板。



母{。
显示:表;
表布局:固定;
宽度:100%;
}
div {
border: 1px solid;
}
左,右,中{
显示:表单元格;
}
左{。
宽度:100px;
身高:200px;
}
右{。
宽度:100px;
身高:200px;
}





乱数假文悲哀坐特,consectetur adipisicing精英。别名ducimus AMET选萃。
美国犹他州.Aliquam,dolorem ipsam波罗不云乎:quisquam saepe简历!







结果如下:


上面的表格单元格完成左侧宽度、右侧宽度和右侧宽度的布局,等等。这是萧边分享给你的全部内容。我希望能给你一个参考,希望你能支持它。