Boostrap 动态 div 位置 [英] Boostrap dynamic div position

问题描述

我需要你的帮助.

我有两个父 div，

在这些 div 中，我放置了由 ajax 调用创建的其他 div.

我创建了一个 div，然后将填充数据.div 是:

 
<h2 style="color:#900000">###</h2><p class="lead">###<p><p style="text-align: right"><i class="fa fa-clock-o"></i>12/5/24</p><div class="缩略图"><img src="">
<div class="caption"><p>不同长度的数据-<<<问题就在这里文本.
<a href=download="sss" class="padd">Allegato: ssss'</a><br>

ajax 调用使 5 div其中长度不同.

砖石的编辑

解决方案

使用这个砌体插件

HTML

<div class="block masonry-brick medium"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick large"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick small"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick small"></div><div class="block masonry-brick small"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick large"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick large"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick small"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick small"></div><div class="block masonry-brick small"></div><div class="block masonry-brick medium"></div><div class="block masonry-brick large"></div>

JS

$('.container').masonry({//选项itemSelector : '.block',});

用于演示

i need yout help.

i've two parent div,

<div class="container-fluid" >
 <div class="row-fluid" id="id">

in these div I put other div created by an ajax call.

I created a div which will then be populated with data. the div is:

       <div class="col-sm-3 col-md-5 space">
            <h2 style="color:#900000">###</h2>
            <p class="lead">###
            <p>
            <p style="text-align: right"><i class="fa fa-clock-o"></i>12/5/24</p>
            <div class="thumbnail">
                <img src="">
            </div>

            <div class="caption">
                <p>Differetn lenght of data  -<<< PROBLEM IS HERE
                   text.</p>


                <a href=download="sss" class="padd">Allegato: ssss'</a>
                <br>
            </div>
        </div>

The ajax call make 5 div Of these with a different length.

EDIT OF masonry

解决方案

Use this masonry plugin

HTML

<div class="container masonry">
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick small"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick small"></div>
    <div class="block masonry-brick small"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick large"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick small"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick small"></div>
    <div class="block masonry-brick small"></div>
    <div class="block masonry-brick medium"></div>
    <div class="block masonry-brick large"></div>
</div>

JS

$('.container').masonry({
    // options
    itemSelector : '.block',

});

For demo

这篇关于Boostrap 动态 div 位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！