首页 > 代码库 > display:table-cell

display:table-cell

2024-08-24 04:16:02   219人阅读

布局神器 display:table-cell

第一个案例：

　　在之前下面的布局方式我会用float来实现，但它触发的问题比较多。比如清除浮动，元素浮动后会脱离文档流，但有时候没办法的不去使用float布局。再来说说inline-block，它结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

 

A
B

demo

 

第二个案例：

　　这个案例我之前最喜欢用的是BootStrap栅格系统。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。但同时栅格系统也有不足之处，一旦超出12元素就会往下掉。

 

  • 1
  • 2
  • 3
  • 4

demo


 

 

 

<style>* { } .demo { color: #3db1fa } .bg-color { background-color: #a0a0a0 } .text-center { text-align: center } .content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100% } .content ul { display: table; width: 100%; padding: 0; border-right: 1px solid #ccc } .content ul li { display: table-cell; border: 1px solid #ccc; text-align: center; height: 100px; border-right: none; line-height: 100px } .box { width: 100px; height: 100px; border: 1px solid #ccc; text-align: center; display: inline-block; font-size: 40px; line-height: 100px } .right { text-align: right; display: table-cell } .left { text-align: left; display: table-cell } .img-box { width: 100px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; background-color: #4679bd } .text-box { margin-left: 20px; border: 1px solid #ddd; padding: 10px }</style>

display:table-cell


联系
我们