Home  >  Article  >  Web Front-end  >  How to use css column-fill attribute

How to use css column-fill attribute

silencement
silencementOriginal
2019-05-28 09:21:172731browse

How to use css column-fill attribute

css column-gap attribute definition and usage

In css, the column-gap attribute is usually separated from columns, column-count, etc. Properties are used together to set the distance between columns after the element content is divided into columns (multi-column layout)

css column-gap attribute syntax format

css Syntax: column-gap: length / normal; (Example: column-gap:36px;)

JavaScript syntax: object.style.columnGap="40px"

css column- gap attribute value description

length: the spacing between custom columns

normal: the normal gap between columns

Example

css3 column-gap property sets the distance between columns Notes

body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;}

.gap{column-count:3;column-gap:60px;}

.gap_normal{column-count:3;column-gap:normal;}

column-gap:60px;Demo, set the distance between columns to 60px

column-gap:normal; Demonstration, set the distance between columns to a normal distance!

Run result

How to use css column-fill attribute

The above is the detailed content of How to use css column-fill attribute. 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