Home  >  Article  >  Web Front-end  >  What is displaytable? How to apply display:table-cell

What is displaytable? How to apply display:table-cell

云罗郡主
云罗郡主Original
2018-10-30 16:04:3718194browse

When many people just come into contact with display, they don’t know what displaytable is and how to use display:table-cell. In fact, it is not difficult to use display:table-cell, as long as we understand the application of the properties of display:table-cell. Rules, then, how to apply display:table-cell? Let's explain how to apply display:table-cell.

What is displaytable? How to apply display:table-cell

1: The attributes of display:table-cell

The attributes of display:table-cell are very similar to the td tag, now Many browsers support the display:table-cell attribute. We all know that tables have some special attributes. Many times, we use vertical centering and associated scaling, so display:table-cell is of great use. , but compared with other display attributes, table-cell will also be destroyed by other CSS. It is generally recommended that when using display:table-cell, do not use the float attribute and try not to use it. display:table-cell is particularly sensitive to width. , and the margin value has no meaning.

2: Application of display:table-cell and non-fixed elements

When making web pages, we use display:table-cell to make elements with non-fixed sizes And vertically centered, the code is as follows:

/*这里的大小是根据高宽上限128像素图片设置的*/
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}

The effect displayed in the browser is as follows:

What is displaytable? How to apply display:table-cell

3. Display:table-cell's automatic Adapt layout

On some large websites, such as the friendly dynamic list in Facebook, display:table-cell and two columns are used to adapt, as shown in the figure:

0010-3 (1).png

Four: List layout under display:table-cell

Under normal circumstances, we use floats for layout, but we use floats for layout. If so, you need to clear the floating effect. The list layout under display:table-cell refers to the horizontal layout.

Since table-cell is wrapped with independent labels, when repeat is output, two loops are performed, and the number of columns is fixed. For general simple styles, we will not use display: table-cell.

The above is about what is displaytable? Full explanation of how to apply display:table-cell. If you want to know more about CSS tutorial, please pay attention to php Chinese website.


The above is the detailed content of What is displaytable? How to apply display:table-cell. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn