html div多列文字,columns

columns

版本:CSS3

继承性:无

columns属性在CSS多列中是比较常用的,本文将带你深入理解columns属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上columns的实例,希望能够对你有所帮助。

columns定义和用法

默认值:看每个独立属性

适用于:除table外的非替换块级元素,display:table-cell 元素, 内联块元素

继承性:无

columns属性值

设置或检索对象每列的宽度

设置或检索对象的列数

columns说明

设置或检索对象的列数和每列的宽度。复合属性

对应的脚本特性为columns。

columns浏览器支持

浅绿 = 支持

红色 = 不支持

墨绿 = 部分支持

橙色 = 实验性质

IE

Firefox

Safari

Chrome

Opera

版本

6-9

4-8

5.1.7

13-23

11.1

版本

10

9-18

columns实例

CSS columns属性详解-CSS教程

列数及列宽固定:

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

列宽固定,根据容器宽度液态分布列数:

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

以上就是这篇columns CSS多列教程的全部内容,更多文章请进入前端开发博客

CSS3 animation状态结束后可以通过animation-fill-mode 控制动画的最后状态,分别是不改变默认行为、保持最后一个属性和回到第一帧。 - 2018-09-08

除了html5的新特性,CSS3的新特性也是面试中经常被问到的。本文分享了一些CSS3选择器、Transition,Transform和Animation等 - 2017-07-09

vw : 1vw 等于视口宽度的1%,vh : 1vh 等于视口高度的1%。本文介绍纯CSS视口单位vw和vh来自行自适应,虽然现在的兼容性还没法完全能够接受,但不妨碍你认识这个vw和vh的强大。 - 2017-07-26

CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。本文分析了calc()的计算使用方法及兼容性 - 2017-05-10

本文主要分享了一些与css3相关的文档手册,给需要的朋友参考,CSS3参考手册不断更新,值得期待 - 2017-07-08

一个使用伪元素来实现边框逐渐发光的过渡效果,主要用到scale和opacity这两个属性。 - 2017-03-31

这个 CSS3 类似于幻灯片旋转的效果,是一个比较有意思并且比较受欢迎的特效。之前没有去研究过,无意在博客上看到 Wenzi 写了这个东西,来看看他的代码是怎么实现的。 - 2017-03-21

作者从CSS3动画的基础入手,分别介绍了移动、缩放、旋转、扭曲到矩阵的变形。在最后给我们讲了关于CSS3矩阵的深度问题研究,值得看看。 - 2017-02-12

在使用CSS3的一些属性时,为了兼顾低端浏览器对CSS3的不友好性,往往需要知道某些浏览器是否支持要使用的CSS3属性,以此来做向下适配。比如常见的CSS3动画就很有必要检测浏览器是否支持。下面分享几种方法: - 2016-09-24

任何CSS属性值为percent时,都需要根据某个参考值进行计算,搞明白这个参考值是什么,理解就容易多了。标准规定:background-position:perenct的参考值为: (容器宽度 - 背景图片宽度). - 2016-06-24

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过使用HTML5的拖放API实现多列元素的拖拽功能。首先,需要为每个可拖拽的元素添加一个拖拽事件处理程序,该处理程序将数据传递给拖动操作。然后,在拖动操作开始时,将拖动的数据存储在数据传输对象中。最后,在拖放目标上添加一个拖放事件处理程序,该处理程序在拖放操作完成时处理数据。 以下是一个示例,演示如何实现多列元素的拖拽功能: HTML代码: ```html <div class="container"> <div class="column" id="column1"> <div class="item" draggable="true" data-id="1">Item 1</div> <div class="item" draggable="true" data-id="2">Item 2</div> <div class="item" draggable="true" data-id="3">Item 3</div> </div> <div class="column" id="column2"> <div class="item" draggable="true" data-id="4">Item 4</div> <div class="item" draggable="true" data-id="5">Item 5</div> <div class="item" draggable="true" data-id="6">Item 6</div> </div> </div> ``` CSS代码: ```css .container { display: flex; } .column { flex: 1; padding: 10px; background-color: #f2f2f2; } .item { margin-bottom: 10px; padding: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; } ``` JavaScript代码: ```js const items = document.querySelectorAll('.item'); // 添加拖拽事件处理程序 items.forEach(item => { item.addEventListener('dragstart', dragStart); item.addEventListener('dragend', dragEnd); }); // 拖拽开始时将数据存储在数据传输对象中 function dragStart() { this.classList.add('dragging'); const dataTransfer = event.dataTransfer; dataTransfer.setData('text/plain', this.dataset.id); } // 拖拽结束时移除样式 function dragEnd() { this.classList.remove('dragging'); } // 添加拖放事件处理程序 const columns = document.querySelectorAll('.column'); columns.forEach(column => { column.addEventListener('dragover', dragOver); column.addEventListener('dragenter', dragEnter); column.addEventListener('dragleave', dragLeave); column.addEventListener('drop', drop); }); // 拖放目标上的拖拽事件处理程序 function dragOver(event) { event.preventDefault(); } function dragEnter(event) { event.preventDefault(); this.classList.add('hovered'); } function dragLeave() { this.classList.remove('hovered'); } function drop() { const dataTransfer = event.dataTransfer; const id = dataTransfer.getData('text/plain'); const item = document.querySelector(`[data-id="${id}"]`); this.appendChild(item); this.classList.remove('hovered'); } ``` 在这个示例中,我们首先选择所有可拖拽的元素并为它们添加拖拽事件处理程序。在拖拽开始时,我们将元素的数据id存储在数据传输对象中。在拖拽结束时,我们移除元素上的样式。 接下来,我们选择所有的拖放目标,并为它们添加拖放事件处理程序。在拖放目标上的拖拽事件处理程序中,我们阻止默认行为以允许拖放操作,并添加/移除样式以指示可放置的位置。在放置操作完成时,我们选择拖放的元素并将其移动到目标位置。 请注意,这只是一个简单的示例,可以根据需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值