CSS display การแสดงผล โดยใช้ CSS

เรามาดู การใช้ display ใน CSS กันครับ



ค่า value ที่ใช้ได้ใน display มีดังนี้ "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit"




  

    
Value
    
Description
  
    

    
inline
    
เป็น Displays เริ่มต้นใน element (ตัวอย่างเช่นแท็ก span)
    
	

    
block
    
ให้แสดง Displays เป็น block (ตัวอย่างเช่นแท็ก p)
    
	

    
inline-block
    
Displays an element as an inline-level block container. The inside of 
	this block is formatted as block-level box, and the element itself is 
	formatted as an inline-level box
    
	

    
inline-table
    
ทำให้มีลักษณะเหมือนตาราง และอยู่ในแบบ inline
    
	

    
list-item
    
ทำให้มีลักษณะเหมือนแท็ก li
    
  

    
run-in
    
ทำให้มีลักษณะเป็น inline หรือ block ขึ้นอยู่กับ context 
  
    

    
table
    
ทำให้มีลักษณะเหมือนแท็ก table
    
	

    
table-caption
    
ทำให้มีลักษณะเหมือนแท็ก caption
    
	

    

      table-column-group
    
ทำให้มีลักษณะเหมือนแท็ก colgroup
    
	

    
table-header-group
    
ทำให้มีลักษณะเหมือนแท็ก thead
    
	

    
table-footer-group
    
ทำให้มีลักษณะเหมือนแท็ก tfoot
    
	

    
table-row-group
    
ทำให้มีลักษณะเหมือนแท็ก tbody
    
	

    
table-cell
    
ทำให้มีลักษณะเหมือนแท็ก td
    
	

    
table-column
    
ทำให้มีลักษณะเหมือนแท็ก col
    
	

    
table-row
    
ทำให้มีลักษณะเหมือนแท็ก tr
    
  

    
none
    
เป็นการปิดการแสดงของ element
  
  

    
inherit
    
ค่าที่ได้จะเป็นค่าที่ inherited มาจาก parrent element
  
  





ที่มา http://www.w3schools.com/cssref/pr_class_display.asp