标签：
说明：总宽度C,个子div宽度w,个数N,子div间距G
思路一float
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .parent{ margin-left: -20px; } .column{ float: left; width: 25%; padding-left: 20px; box-sizing:border-box; } </style> </head> <body> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </body> </html>
思路二table
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .parent-fix{ margin-left: -20px; } .parent{ display: table; width: 100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 20px; background-color: #3333CC } </style> </head> <body> <div class="parent-fix"> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </div> </body> </html>
思路三flex
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .parent{ display: flex; } .column{ flex:1; background-color: #3333CC } .column+.column{ margin-left: 20px; } </style> </head> <body> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/ganmk--jy/p/4694983.html
