HTML怎么创建多列布局_HTMLCSSmultiColumn多列布局的实现方法

哎呀，我得和你谈谈这件事。
两年前，当我为客户构建新闻网站时，我制作了这种多列布局。
当时就玩的是网上的教程，现在想想其实也挺简单的。

我使用了你当时提到的所有属性。
我们以列缩写为例。
特别方便。
我在一个旧项目中尝试过这个，columns: 3 2 00px;，这意味着最多三列，每列2 00px宽度。
浏览器会做什么？他会自己解决的。
如果容器足够宽，则会出现三列。
如果不够宽，会自动变为两列或一列，但每列不会窄于2 00px。
效果确实不错，不用担心Flexbox。

还有列数和列宽的单独设置，我也用过。
在一个杂志风格的网站上，我强制设置了三栏，栏数：3 ；，所以每栏的最小宽度为1 5 0px，栏间距为2 0px，并添加了一条虚线将它们分开。
那种感觉特别明显。
但请记住，当时一个大客户正在使用 IE1 1 ，我发现column-span: all;这东西在 IE1 1 上完全没用，这让我头晕目眩。
最后我只好硬着头皮用JavaScript来控制列之间的标题。
即使有点烦人，也比什么都没有好。

闯入：避免；你提到的，这个属性是如此重要！我在电子商务网站上创建产品列表时尝试过。
想想看，如果选项卡内容在列之间断开连接，那该有多尴尬？我刚刚添加了闯入：避免；每张牌，嘿，效果是立竿见影的。
图片、广告等都在一栏展示，没有一处不协调。

我也处理响应式设计。
在适配移动网站时，我添加了媒体查询，@media (max-width: 6 00px) { .article { columns: 1 ; } }，意思是当屏幕窄于6 00px时，会自动切换为单栏布局。
在手机上观看内容方便多了，也不那么杂乱了。

但是，我真的不知道内容平衡。
浏览器会自动将内容分配给列，这有时很糟糕。
如果你想手动控制，就得依赖JavaScript。
即使很烦人，也比什么都没有好。

总的来说，如果使用得当，多列布局确实非常有效，特别适合新闻和文章页面。
你提到的这些属性，列，列数，列宽，列间隙，列规则，列跨度，内部中断，需要知道。
当然，兼容性问题也是必须要考虑的，尤其是老的浏览器，必须一一测试。

希望我的经验可以帮到你。
不要像我一样长期胡闹，不断出现问题。
多尝试一下，你就会进步。

如何使用HTML、CSS和JavaScript实现饿了么点餐左侧菜单效果？

严格来说，它是一个添加交互的框架； HTML 用于构建 CSS 和 JS。
我上周处理了类似的请求，仅此而已。

用 div 包裹 HTML 部分。
左边的菜单用ul li表示，右边的内容用div分隔。
data-index属性是关键，它对应于菜单项和内容区域。

在 CSS 方面，Flexbox 处理左列和右列。
侧边栏固定在左侧，内容区域自动移动到右侧。
在动态情况下使用引人注目的渐变和过渡效果。
内容区域默认隐藏，仅在使用时显示。
这非常重要。

JS监听点击事件。
您点击的任何菜单都会将它们添加到与当前主题对应的内容区域中。
不要忘记选择第一个作为默认值。

通过改进，可以随时上传内容。
一旦你在移动端输入媒体查询，小屏幕就会消失。
仅使用 CSS 过渡来实现动画效果，这样可以缓解问题。

你试试这段代码，几乎是一样的。
还有其他问题吗？