USHKO浮动夫图从左到右

对于我的项目,我使用 bootstrap.

我正试图向左转漂浮的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 彼此没有差距 /如果您只是制作一个新的字符串,您会得到哪些/
已邀请:

诸葛浮云

赞同来自:

你必须阅读
http://getbootstrap.com/css/#grid
的 Twitter Bootstrap:

通过指定可用的12个数字来创建网状列
您要覆盖的列。 如果一个线放置更多 12 列,每组附加列作为一个整体,将传输到新字符串。

所以之后 12 列必须从新的线开始新的行
<div class="row">

.

看看这个
http://getbootstrap.com/css/#grid-example-basic
.

所以,如果你想添加 4s 在下面 div 从 1s, 你的片段应该是:


<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>
<div class="row&gt; &lt;div class=" col-md-4"="">444444444444<br/></div>
</div>


http://www.bootply.com/HbFGma5nI0
在第二个片段中,您必须展开网格系统 Bootstrap 使用缩略图组件轻松显示网格图像,视频,文本等等。


<div class="col-md-4">
<div class="thumbnail">
<img class="img-responsive" src="[url=http://placehold.it/350X350"/>]http://placehold.it/350X350"/>[/url]
<div class="caption">
<p>11111111111111111</p>
</div>
</div>
</div>


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 ..... 等等。

检查下面的代码。 我使用一个阵列的高度仅显示它适用于不同的高度。


var arr = [100, 200, 300, 400, 200, 100, 300, 500];
var colors = ["red","green","blue", "yellow","golden", "orange", "maroon"]
var divs = 13;

for /var i = 0; i < divs; i++/ {
var ht = arr[Math.floor/Math.random// * arr.length/];
var clr = colors[Math.floor/Math.random// * colors.length/];
var rem = i%4;

$/"#wrapper .box"+rem/.append/"<div>random text</div>"/;
$/".box"+rem+" div:last"/.css/{
"height": ht + "px", "background":clr+""
}/;
}


http://jsfiddle.net/anpsmn/t66 ... sult/
笔记:

添加的JS代码将由您的代码后面拍摄 divs. 我只是为了这个演示。

风见雨下

赞同来自:

如果您正在使用 bootstrap 3, 你必须有 12 列。 试试吧:


<div class="row">
<div class="col-md-3">11111111<br/></div>
<div class="col-md-3">2222222222<br/>222222222222<br/></div>
<div class="col-md-3">333333333333<br/></div>
<div class="col-md-3">444444444444<br/></div>
</div>


http://getbootstrap.com/css/#grid

八刀丁二

赞同来自:

使用插头 Masonry, 从这里得到它
https://masonry.desandro.com/
/

八刀丁二

赞同来自:

您用列浮动的问题浮动与反应列在具有不同的高度时是相关的。

如图所示
http://getbootstrap.com/css/%2 ... esets
, 您可能必须手动清洁列,以便再次重新计算它们的位置。 添加
<div class="clearfix"></div>

允许重新计算以下列的列。 如果你想拥有 3 列和新字符串从每4个开始,您可以启用此 div 在每个第三个元素之后。

例如:


<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="clearfix"></div>
<div class="col-md-4">444444444444<br/></div>
<div class="col-md-4">5555555555555<br/></div>
</div>


扬声器 4 现在它在列下正确显示 1, 但不是 IMMEDIATELY 以下; 相反,它被正确排列在列中 5 在列下显示 2, 同时,允许整个线在相同的初始高度上。

我在这个例子上扩展了一个小例子:
http://www.bootply.com/NriYjz0OAl
并在您的其他示例中演示它:
http://www.bootply.com/oZz9zoFiqe
似乎没有办法消除每行中的差距而不手动计算每个行的高度 div, 如另一个答案所示。

小姐请别说爱

赞同来自:

您可以使用 JavaScript 对于所有细胞的胸部并接收每个高度。 然后计算最佳的分布。 之后,您可以移动细胞 3 大列或设置单元的绝对位置,并设置左上坐标 JavaScript.
缺点是您需要的是,使整个内容在开始之前将整个内容加载到浏览器中。 JavaScript.

另一种选择 - 为所有单元格安装固定高度 /我在类似的情况下做了/. 特别是当签名仅由一两行组成时。 你可以使用很多 CSS 对于截断长名称有些可接受的方式。

诸葛浮云

赞同来自:

实现所需的结构 boostrap:


<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>
<div class="row">
<div class="col-md-4">444444444444<br/></div>
</div>


你可以这样做 /PHPish /no so/ 伪码/:


$values = get_values//;
$html = '<div class="row">';
foreach/$values as $idx =&gt; $v/{
$html .= "<div class="col-md-4">$v</div>";
$html .= /$idx + 1/ % 3 ? '' : '<div class="row"></div>';
}
$html = .= '</div>';
echo $html;

詹大官人

赞同来自:

Twitter Bootstrap 使用网格系统 12 移动设备,平板电脑和桌面的列。 所以你不能使用 col-md-4 四次,它将全部 16. 因此,您需要相应地划分屏幕。 它可以帮助您了解结构 div 从这里

要回复问题请先登录注册