How to use column-width attribute-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to use column-width attribute

青灯夜游

Feb 16, 2019 pm 01:58 PM

column-widthcss3

The column-width attribute is used to specify the width of the column; when the number of displayed columns of the element is not explicitly specified, this attribute can be used to set the number of displayed columns.

How to use column-width attribute

CSS3 column-width attribute

Function: column-width attribute Used to specify the width of the column.

Syntax:

column-width: auto|length;

Parameters:

auto: The column width is determined by the browser; the column width is determined by other factors, for example: column The number of columns set by the -count attribute.

length: Specifies the width of the column.

Note: Internet Explorer 10 and Opera support the column-width attribute; Firefox supports the alternative -moz-column-width attribute; Safari and Chrome support the alternative -webkit-column-width attribute ;Internet Explorer 9 and earlier browsers do not support the column-width attribute.

CSS3 column-width attribute usage example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.auto
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	
	column-width:auto;
	-moz-column-width:auto; /* Firefox */
	-webkit-column-width:auto; /* Safari and Chrome */
}
.length1
{
	column-width:100px;
	-moz-column-width:100px; /* Firefox */
	-webkit-column-width:100px; /* Safari and Chrome */
}
.length2
{
	column-width:300px;
	-moz-column-width:300px; /* Firefox */
	-webkit-column-width:300px; /* Safari and Chrome */
}
</style>
</head>
<body>

<h3 id="column-width-auto">column-width:auto;</h3>
<div class="auto">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
<h3 id="column-width-px">column-width:100px;</h3>
<div class="length1">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
<h3 id="column-width-px">column-width:300px;</h3>
<div class="length2">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

Rendering:

How to use column-width attribute

The above is the detailed content of How to use column-width 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

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles