如何强制直列受阻的div到相同的高度 [英] How to force inline-blocked divs to same height

问题描述

我有直列受阻的div像一个网格。我想，迫使所有的人，他们位于相同行相同的高度，就应该获得最长div的高度。

i have inline-blocked divs like a grid. i would like to force all of them which are in the same line to the same height, they should get the height of the longest div.

CSS，jQuery的或简单的JavaScript的解决方案将是巨大的。

Css, jquery or simple javascript solution would be great.

这是一件很常见的今天......我去看看砌体但据我了解的样品显卡，它不对齐这样的...我对不对？

It is something very common nowadays... i went to have a look at Masonry but as far as i understood on the sample graphics, it does not align like this... am i right ?

有问题的博客： HTTP：//ildesign-blogger-demo-1.blogspot。 FR /

中的HTML：

<div class="container>
    <div class="inline">text</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
    <div class="inline">whatever</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
</div> 

CSS的：

The CSS :

.container {width: 100%; display:block;} 
.inline {display: inline-block; width: 28%; margin: 1%; padding: 1%;}

所以，也有每行三个一字排列的div，我想行beeing对齐，因此行内的div应该具有相同的高度，如最长的DIV在该行...

So, there are three inline divs in each line, i would like the lines beeing aligned, so the inline divs should have the same height like the longest div in the line...

编辑：我重新编辑这篇文章来补充的是，HTML是Blogger的xml的模板生成。所以，如果你建议加上各三个一字排列的div到一个div，这将是像一排，我不知道该怎么办呢？原始的XML code：

Edit : I re-edited this post to add that the html is generated by a Blogger xml template. So, if you suggest to add each three inline divs into a div which will be like a row, i do not know how to do it... the original xml code :

<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <div class='date-outer'>
      <h2 class='date-header'><span><data:post.timestamp/></span></h2>
      <div class='date-posts'>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'><data:adCode/></div>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </div>
    </div>
  </b:loop>
<data:adEnd/>
</div>

因此​​， .blog-帖子 = .container 和 .date-外 = .inline 的我上面的html例子...

So the .blog-posts = .container and the .date-outer = .inline in my above html example...

砌体能做到吗？ 还是一个jQuery code用于与高度相等的网格？

Masonry can do it ? Or a jquery code for making a grid with equal heights ?

推荐答案

我一直在寻找一个jQuery插件，这让div的在最高div的高度相等的高度。有很多在网络上，但不是所有的人工作。我已经发现了这完美的作品： https://github.com/johnnyfaldo/equal-heights-responsive

I was looking for a jquery plugin which makes the divs in equal height of the height of the tallest div. There are a lot on the web but not all of them work. I have found one which works perfectly : https://github.com/johnnyfaldo/equal-heights-responsive

它需要四个.js文件中：

It needs four .js files :

• 的jquery.js
• underscore.js
• html5shiv.js
• 相等的高度，responsive.js

要启动插件：

<script type="text/javascript">
    $(document).ready(function() {
        $('.elements-to-equalise').equalHeights({
            responsive:true,
            animate:true,
            animateSpeed:500
        });
    });
</script> 

这篇关于如何强制直列受阻的div到相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！