html – 强制div到下一列_html-js-css

概述我正在使用列计数创建图像网格.使用列的问题是,就像文本一样,甚至图像也会被破坏.因此,图像的上半部分可以在一列中,下半部分可以在第二列中.我通过将display：inline-block添加到列中的项目来解决这个问题.这让我遇到了目前的问题：如果列数为3且有7个项目,则项目显示为[3] [3] [1]. [item] [item] [item][item] [item][item 我正在使用列计数创建图像网格.使用列的问题是,就像文本一样,甚至图像也会被破坏.因此,图像的上半部分可以在一列中,下半部分可以在第二列中.我通过将display：inline-block添加到列中的项目来解决这个问题.这让我遇到了目前的问题：
如果列数为3且有7个项目,则项目显示为[3] [3] [1].

[item]   [item]   [item][item]   [item][item]   [item]

我希望这些项目显示为[3] [2] [2].所以问题是：我可以将其中一个div强制到下一列吗？

HTML

<div ID="container">    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div></div>

CSS

#container {    column-count: 3;    -moz-column-count: 3;    -webkit-column-count: 3;    wIDth: 100%;}.item {    background: red;    /*-webkit-column-break-insIDe: avoID;    -moz-column-break-insIDe:avoID;    -moz-page-break-insIDe:avoID;    page-break-insIDe: avoID;*/    display: inline-block;    height: 250px;    margin-bottom: 20px;    wIDth: 100%;}

jsfiddle

被注释掉的部分是防止图像中断的第二种方式,但它比简单的显示更少支持：内联块.它完全一样.

我试着改变身高并使用清晰.

更新
根据要求,提供一些背景信息/用例.
图像网格将用于餐馆的简单网站.它将在具有两种不同功能的多个页面上使用.功能一位于首页,其中八个图像(纵向或横向格式)将用作指向不同页面的链接. (8个图像得到正确分割[3] [3] [2])图像网格的第二个功能是,作为图像网格.例如,餐厅历史悠久,可以追溯到近100年.可能会在此过程中添加更多图像.使用列数而不是三个div可以更轻松地添加图像,并且可以非常轻松地进行响应.问题是,对于一定数量的图像,如7,图像不会在列上正确分割.

更新2
我尝试使用砌体框架,但工作缓慢.

解决方法如果所有其他方法都失败了,你可以插入一个虚拟div,虽然我觉得它很脏！ (我不确定你的设置是否可行).

<!DOCTYPE HTML><HTML lang="en"><head><Meta charset="utf-8"><style>#container {    column-count: 3;    -moz-column-count: 3;    -webkit-column-count: 3;    wIDth: 100%;}.item {    background: red;}.item,.dummy {    display: inline-block;    height: 250px;    margin-bottom: 20px;    wIDth: 100%;}</style></head><body><div ID="container">    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div></div></body></HTML>

总结

以上是内存溢出为你收集整理的html – 强制div到下一列全部内容，希望文章能够帮你解决html – 强制div到下一列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1060786.html