it-swarm.com.ru

Загрузочный столбец одинаковой высоты

Привет у меня есть четыре div в строке начальной загрузки. Я хочу, чтобы все div в этом ряду имели одинаковую высоту и не нарушали ответственность. Я не знаю, как это сделать, не нарушая ответственности. 

Я пытался решить эту проблему с фиксированной высотой, но с точки зрения отзывчивости это плохое решение.

Спасибо :-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>
35
user3279494

Вы можете достичь этого с помощью JavaScript. Найдите самую большую высоту из 4-х дивов и сделайте их всех на одной высоте с самой большой.

Вот код:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});
63
paulalexandru

В одном месте был официальный экспериментальный пример столбцов той же высоты, использующих CSS flexbox с Bootstrap. Вот суть этого:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

А затем используйте <div class="row row-eq-height"> вместо <div class="row">.

Обратите внимание, что flexbox не поддерживается в IE <10.

22
cvrebert

К вашему сведению - я сделал это, чтобы решить мою проблему, чтобы включить отзывчивые точки останова, которые соответствуют точкам останова в начальной загрузке. (Я использую переменные LESS из начальной загрузки для синхронизации точек останова, но ниже приведена скомпилированная версия CSS)

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

затем добавил классы к родителю, которые были необходимы.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>
8
FourLeafCleaver

Правка 1: Я должен был помочь кому-то с этим, поэтому я сделал plunkr . Перейдите к «script.js» и прокомментируйте «bootstrap_equalizer ();» функция, чтобы увидеть оригинальный бутстрап, без колонок одинаковой высоты.

Я знаю, что это немного поздно, но я уверен, что это может улучшить ваш код и помочь некоторым другим! :)

Как я привык работать с Foundation 5, когда мне приходится работать с начальной загрузкой, мне не хватает «эквалайзера».

Я делаю небольшую функцию для вызова на страницах, где вам нужно «выровнять» некоторые столбцы .... Мой код основан на ответе @paulalexandru!

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

На стороне HTML, вам просто нужно сделать это: 

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

столбец 1 и столбец 2 будут иметь одинаковую высоту! Конечно, вы можете иметь более 2 столбцов!

Надеюсь, что это может помочь! знак равно

5
maxime1992

Вы можете использовать свойства display:table:

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Пример

Обновление

Так как люди, похоже, не одобряют это, так как это нарушает загрузку, вам действительно следует ориентироваться на элементы с разными классами, которые использует загрузчик - так что вот обновленная скрипта, которая не сломает остальную часть загрузки - для приведенного выше кода, если вы добавьте еще один класс table-row в строку, тогда вы можете использовать следующие стили:

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Пример

2
Pete

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

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

        maxHeight = Math.max.apply(null, heights);

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

Проверьте демо здесь - https://jsfiddle.net/3Lam7z68/ (Измените размер выходной панели, чтобы увидеть изменение размера каждого столбца div)

2
Nirav Varma

Чтобы иметь одинаковую высоту столбцов и не нарушать отзывчивость, вы должны попробовать это:

https://github.com/liabru/jquery-match-height

Он использует "JQuery". До сих пор для меня это самое простое решение.

1
Omar Gonzales

эксперимент Bootstrap , как упомянуто @cvrebert, работает для меня в Microsoft Internet Explorer (версия 11) и Mozilla Firefox (версия 37), но не работает для меня в Google Chrome (версия 42, 64-разрядная версия).

Вдохновленный ответами @ cvrebert и @ Maxime, я придумал это решение, которое работает для меня в этих трех браузерах. Я решил поделиться этим, так что, возможно, другие тоже могут его использовать.

Предположим, у вас есть что-то вроде этого в вашем HTML:

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

Добавьте это к вашему JS:

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

Он использует jQuery 's .outerHeight () функцию для вычисления и установки внутренних высот div.

Кроме того, я добавил это в свой CSS, я не уверен, поможет ли это, но это, безусловно, не повредит:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
1

Для людей, которые приходят сюда за этим решением в React, вот оно:

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.Push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

Тогда к вашим столбцам: 

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

Наслаждаться ;)

0
Emidomh

Я немного опоздал на игру, но ....

Это выровняет высоту элементов в строке с классом «row-height-matched». Он соответствует ячейкам на основе их верхнего значения, поэтому, если они перемещаются друг под другом, когда страница становится меньше, я не устанавливаю высоту.

Я знаю, что существует множество версий CSS, но все они нарушают мой макет.

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^='col-']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.Push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})
0
Beakie

Чтобы все div имели одинаковую высоту, вы должны указать фиксированную высоту для внутреннего div (div class = "well"),

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

Вы можете перейти по этой ссылке демо например.

0
shan

Если кто-то заинтересован в чистом CSS-решении, которое не нарушает отзывчивость, это сработало для меня (обратите внимание, что я добавил класс "row-eq-height", где класс "row" должен прояснять и не мешать загрузке css и изменил «md» на «xs», чтобы проверить это лучше в демоверсии).

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>              

cSS:

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Вы можете проверить демо здесь.

0
gugol

Я думаю, что ответ paulalexandru довольно хороший. Я бы добавил немного кода, чтобы избежать проблем при изменении размеров окна. Если div с самой большой высотой содержит фотографию, у вас могут возникнуть проблемы при изменении ширины изображения, поскольку оно также изменит его высоту, поэтому в этом случае вам следует иметь дело с resizeevent.

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
}
0
Luis González