Как заставить встроенные заблокированные divs на ту же высоту

у меня есть встроенные заблокированные divs, как сетка. я хотел бы заставить всех из них, которые находятся в одной линии на одной высоте, они должны получить высоту самого длинного div.

Css, jquery или простое решение javascript было бы здорово.

Это что-то очень распространенное в наши дни... я пошел посмотреть на кладку, но, насколько я понял по образцу графики,она не выравнивается так... я прав ?

блог в вопрос : 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-код :

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

Итак, в каждой строке есть три встроенных дива, я хотел бы, чтобы линии были выровнены, поэтому встроенные дивы должны иметь одинаковую высоту, как самый длинный div в строке...

Edit: я повторно отредактировал этот пост, чтобы добавить, что html генерируется шаблоном XML Blogger. Итак, если вы предлагаете добавить каждые три встроенных divs в div, который будет как скандал, я не знаю, как это сделать... исходный код xml:

<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>

Так .блог-посты = .контейнер и .дата-внешний = .inline в моем примере html выше...

масонство может это сделать ? Или код jQuery для создания сетки с равными высотами ?

6
alignment css height jquery

3 ответов

display: inline-block стиль предназначен для чего-то другого, вот пример того, для чего он был разработан (inline является отдельным режимом dispay, поэтому я бы рекомендовал переименовать вас вinline-block независимо от того, каким образом вы собираетесь продолжить - пока я использовал ваши имена):

создайте это с помощью 100 ячеек:

<div class='block'>
    <div class="inline" style='width: 50px; height: 50px;'>1</div>
    <div class="inline" style='width: 50px; height: 50px;'>2</div>
    <div class="inline" style='width: 50px; height: 50px;'>3</div>
..
    <div class="inline" style='width: 50px; height: 50px;'>100</div>
</div>

затем измените размер окна и смотреть, как коробки сделать макет.

то, что вам нужно, это таблица, либо обычная:

<table>
 <tr>
  <td>
   <div>First Col Content</div>
  </td>
  <td>
   <div>Second Col Content</div>
  </td>
  <td>
   <div>Third Col Content</div>
  </td>
 </tr>
</table>

или a CSS one:

<div style='display: table;'>
 <div style='display: table-row;'>
  <div style='display: table-cell; width: 33%; min-width: 33%;'>
   <div>First Col Content</div>
  </div >
  <div style='display: table-cell; width: 33%; min-width: 33%;'>
   <div>Second Col Content</div>
  </div >
  <div style='display: table-cell; width: 34%; min-width: 34%;'>
   <div>Third Col Content</div>
  </div>
 </div>
</div>
2

очень простой плагин jQuery, который также включает автоматическое изменение размера элементов при изменении размера окна.

изменить .my-inline-block-class к селектору jQuery, который будет выбирать элементы встроенного блока.

(function($, window) {
    var $ls;
    function autoheight() {
        var max = 0;
        $ls.each(function() {
            $t = $(this);
            $t.css('height','');
            max = Math.max(max, $t.height());
        });
        $ls.height(max);
    }
    $(function() {
        $ls = $('.my-inline-block-class'); // the inline-block selector
        autoheight(); // first time
        $ls.on('load', autoheight); // when images in content finish loading
        $(window).load(autoheight); // when all content finishes loading
        $(window).resize(autoheight); // when the window size changes
    });
})(jQuery, window);
1

Я искал плагин jquery, который делает divs на равной высоте высоты самого высокого div. Есть много в интернете, но не все из них работают. Я нашел тот, который отлично работает:https://github.com/johnnyfaldo/equal-heights-responsive

требуется четыре .файлы JS :

  • С помощью jQuery.js
  • подчеркивания.js
  • html5shiv.js
  • равных высот реагирует.js

To инициировать плагин :

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