USHKO浮动夫图从左到右
对于我的项目,我使用 bootstrap.
我正试图向左转漂浮的Diva,所以我做到了
http://www.bootply.com/yyKS8cgS4h
但是,如你看, div 从 4s 没有添加 div 从 1s, 而且 div 从 3s. 我怎样才能解决它,以便它被添加 divs 从 1s ?
编辑
潜水的数量是动态的,所以我不能只是把它添加到 div 11111, 我想要的是像主页的东西 pinterest.com, 从左到右添加所有DIVA,每个圣经都没有大空间
为了更好地理解你的问题,我带来了另一个例子。
http://www.bootply.com/R3MXHJL9wM
这就是我想做的:用它们下面的描述填写页面图像。 但我希望页面没有巨大的空间填充,类似于你在榜样中看到的页面。
https://i.stack.imgur.com/Tn5if.png
例如,图像 divs 彼此没有差距 /如果您只是制作一个新的字符串,您会得到哪些/
我正试图向左转漂浮的Diva,所以我做到了
<div class="row">
<div class="col-md-4">11111111<br/></div>
<div class="col-md-4">2222222222<br/>222222222222<br/></div>
<div class="col-md-4">333333333333<br/></div>
<div class="col-md-4">444444444444<br/></div>
</div>
http://www.bootply.com/yyKS8cgS4h
但是,如你看, div 从 4s 没有添加 div 从 1s, 而且 div 从 3s. 我怎样才能解决它,以便它被添加 divs 从 1s ?
编辑
潜水的数量是动态的,所以我不能只是把它添加到 div 11111, 我想要的是像主页的东西 pinterest.com, 从左到右添加所有DIVA,每个圣经都没有大空间
为了更好地理解你的问题,我带来了另一个例子。
http://www.bootply.com/R3MXHJL9wM
这就是我想做的:用它们下面的描述填写页面图像。 但我希望页面没有巨大的空间填充,类似于你在榜样中看到的页面。
https://i.stack.imgur.com/Tn5if.png
例如,图像 divs 彼此没有差距 /如果您只是制作一个新的字符串,您会得到哪些/
没有找到相关结果
已邀请:
9 个回复
诸葛浮云
赞同来自:
http://getbootstrap.com/css/#grid
的 Twitter Bootstrap:
通过指定可用的12个数字来创建网状列
您要覆盖的列。 如果一个线放置更多 12 列,每组附加列作为一个整体,将传输到新字符串。
所以之后 12 列必须从新的线开始新的行
.
看看这个
http://getbootstrap.com/css/#grid-example-basic
.
所以,如果你想添加 4s 在下面 div 从 1s, 你的片段应该是:
http://www.bootply.com/HbFGma5nI0
在第二个片段中,您必须展开网格系统 Bootstrap 使用缩略图组件轻松显示网格图像,视频,文本等等。
http://www.bootply.com/QKZBKM3NmO
三叔
赞同来自:
http://getbootstrap.com/css/%2 ... esets
有库存四个级别的网格,你将不可避免地遇到问题
, 当在某些点时,您的柱子并不完全清洁,因为
其中一个高于另一个。 要修复它,请使用组合 a
.clearfix 和我们的自适应课程公用事业。
风见雨下
赞同来自:
http://pinterest.com
主页
pinterest.com, 然后发现每个部分都有一个属性 top 和 left. 我猜他们计算并建立上部和左财产。
这只是一个获得所需视图的方法。
而不是有一行并添加全部 divs 里面,你可以 x 本行中的列和以编程方式添加 divs 在每列中。
EX:
假设我安装了 4 柱子 x1, x2, x3 和 x4 我有关于 9 DOVOV。 我将运行周期,以便以该顺序添加DIVA d1 -> x1, d2-> x2, d3-> x3, d4-> x4, d5->x1 ..... 等等。
检查下面的代码。 我使用一个阵列的高度仅显示它适用于不同的高度。
http://jsfiddle.net/anpsmn/t66 ... sult/
笔记:
添加的JS代码将由您的代码后面拍摄 divs. 我只是为了这个演示。
风见雨下
赞同来自:
http://getbootstrap.com/css/#grid
八刀丁二
赞同来自:
https://masonry.desandro.com/
/
八刀丁二
赞同来自:
如图所示
http://getbootstrap.com/css/%2 ... esets
, 您可能必须手动清洁列,以便再次重新计算它们的位置。 添加
允许重新计算以下列的列。 如果你想拥有 3 列和新字符串从每4个开始,您可以启用此 div 在每个第三个元素之后。
例如:
扬声器 4 现在它在列下正确显示 1, 但不是 IMMEDIATELY 以下; 相反,它被正确排列在列中 5 在列下显示 2, 同时,允许整个线在相同的初始高度上。
我在这个例子上扩展了一个小例子:
http://www.bootply.com/NriYjz0OAl
并在您的其他示例中演示它:
http://www.bootply.com/oZz9zoFiqe
似乎没有办法消除每行中的差距而不手动计算每个行的高度 div, 如另一个答案所示。
小姐请别说爱
赞同来自:
缺点是您需要的是,使整个内容在开始之前将整个内容加载到浏览器中。 JavaScript.
另一种选择 - 为所有单元格安装固定高度 /我在类似的情况下做了/. 特别是当签名仅由一两行组成时。 你可以使用很多 CSS 对于截断长名称有些可接受的方式。
诸葛浮云
赞同来自:
你可以这样做 /PHPish /no so/ 伪码/:
詹大官人
赞同来自: