Сделайте дочерний div равным в строке, используя jquery

Question

Сделайте дочерний div равным в строке, используя jquery

-4

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

Это скрипка, которую я создал

http://jsfiddle.net/Qr48S/60/

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

Кнопка также нужна в нижней части столбца

Похоже, это

<div class="container">
  <div class="row">
    <div class="item-container col-lg-4 col-md-4 col-sm-4">
      <div class="image"><img class="img-responsive"  
      src="http://placehold.it/350x150"></div>
      <div class="item-title"> 
         title title title title title title title 
         title title title title title title title title title 
      </div>
      <div class="item-details"> 
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
      </div>
      <div class="item-button"> 
         <button type="button" class="btn btn-primary">Add to cart</button> 
      </div>
      </div>

      <div class="item-container col-lg-4 col-md-4 col-sm-4">
      <div class="image"><img class="img-responsive"  
      src="http://placehold.it/350x150"></div>
      <div class="item-title"> 
         title title title title title title title 
         title title title title title title title title title
         title title title title title title title 
         title title title title title title title title title 
      </div>
      <div class="item-details"> 
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
        <p>details 1</p>
        <p>details 2</p>
        <p>details 3</p>
        <p>details 4</p>
      </div>
      <div class="item-button"> 
         <button type="button" class="btn btn-primary">Add to cart</button> 
      </div>
      </div>
   </div> 
</div>

Alyssa Reyes 20 апр. 2016, в 18:51

Источник

1

Желаемое поведение не ясно из скрипки или описания. Чего ты хочешь достичь?
RahulB 20 апр. 2016, в 16:13
0

Я хочу сделать каждый div равным друг другу. От родительского divа до дочернего div
Alyssa Reyes 20 апр. 2016, в 16:21
0

Вы хотите, чтобы текст заголовка не расширялся и оставался до той же ширины?
RahulB 20 апр. 2016, в 16:23
0

такой же высоты. получая самый высокий каждый ряд в пределах 12 столбцов в равных. так же, как детали и кнопка всегда должна быть в нижней части столбца
Alyssa Reyes 20 апр. 2016, в 16:45

Показать ещё 2 комментария

Теги:

javascript

jquery

twitter-bootstrap

html

css

1 ответ

Ещё вопросы

Желаемое поведение не ясно из скрипки или описания. Чего ты хочешь достичь?
Я хочу сделать каждый div равным друг другу. От родительского divа до дочернего div
Вы хотите, чтобы текст заголовка не расширялся и оставался до той же ширины?
такой же высоты. получая самый высокий каждый ряд в пределах 12 столбцов в равных. так же, как детали и кнопка всегда должна быть в нижней части столбца

AceWebDesign · Answer 1 · 2016-04-20T17-00-00.000Z

Моя рекомендация будет заключаться в использовании плагина высоты матча

Я вложил его в эту вилку вашего jsfiddle

http://jsfiddle.net/n2e4wg76/

Вы можете увидеть, что это упростит. Конечно, вместо вставки всего js файла вы бы включили js файл из https://github.com/liabru/jquery-match-height

то просто используйте

$(document).ready(function() {

    $('.item-container').matchHeight();

});