如何限制树枝中Div的大小

时间:2014-08-13 13:07:30

标签: symfony twig

我需要什么:

    * All div should be of Equal Height and width.

面临的问题

 * is some data some div are bigger then another div.

以下是Snapshot Url:

 http://postimg.org/image/bxelzcb09/.

API:

 {
 data: [
 {
id: 42166,
Company_Website: "http://www.amphenol-highspeed.com/",
company_name: "Amphenol High Speed Interconnect",
city_name: "New York",
country_name: "USA",
comp_img: null,
Product_Name: null
},
{
id: 42167,
Company_Website: "http://www.clearfieldconnection.com/",
company_name: "Clearfield, Inc.",
 city_name: "Plymouth",
country_name: "USA",
comp_img: null,
Product_Name: null
},
}

树枝的代码:

 {% for item in data.about.data%}
 {%if  ((loop.index-1)%2)=='0' %}
 <div class="row half">
 {% endif %}        

    <div class="6u">
            <div class="box panel exhibitor">
                    <div class="row flush nbdr no-collapse">
                    <div class="10u name">
                    <h3>{{item.company_name }}</h3>
                    <p class="cnt">{{item.city_name }}
           {% if item.Company_Website is defined and item.Company_Website is not empty%}
        <a href="{{ item.Company_Website}}" target="_blank" rel="nofollow"><i class="icon icon-external-link blue bld"></i></a></p>
                     {% endif %}
        </div>
        <div class="2u tar">
            {% if item.comp_img is not empty %}
             <img width="50" alt="" class="image round lazy"   src="{{item.comp_img}}"  }}>
          {% endif %}
           <br class="clear">
          </div>
          <p class="prod">
            {% set foo = item.Product_Name|split(',') %}
            {% for i in  foo|slice(0, 5) %}
            {{ i }} {% if loop.index > 1 %}
                      ,{{ i }}
                    {% endif %}
            {% endfor %}
            </p>
                    </div>
                    <div class="row flush nbdr pdt">
                    <div class="12u connect">
                    <!--<p class="mr"><a href="#"><i class="icon icon-envelope"></i> Connect</a> <span>Booth # 50</span></p>-->
                    </div>
                    </div>
                    </div>
                    </div>






   {%if ((loop.index)%2) == '0' %}
 </div>
 {% elseif  (loop.last) %2 !='0'%}
 </div>
 {% endif %}
  {% endfor %}

  {% if data.about.data|length < '30' and request.ajax =='0' %}
     
    {% elseif data.about.data|length < '30' %}


        <div  class="12u" id="12">
     </div>
  {% endif %}
  • 我只想要每个div的大小应该相当于每个。
  • 案例a。)考虑4 div,如图所示
    • 如果第一个div用数据丰富,而第二个inf则为rich div为null,没有数据。
    • 如果第一个div用空数据充实,而其他数据用大量数据充实。
  • 请告诉我如何解决这个问题,问题在css中,或者我可以通过编码来解决这个问题。
  • 我需要有或没有数据丰富的所有div应该具有相同的大小。
  • 我尝试删除我关注的空格:http://twig.sensiolabs.org/doc/tags/spaceless.html

  • 是否欢迎任何有价值的想法?

1 个答案:

答案 0 :(得分:1)

也许你应该使用DarkBee所说的CSS,或者你可以使用基础的JS均衡器系统正常工作。

http://foundation.zurb.com/docs/components/equalizer.html