CSS 텍스트 줄 바꿈 세로 맞춤

Question

저는 부트 스트랩을 사용하고 있으며 6 개의 그리드 열이있는 행이 있습니다. 오프셋 클래스없이 열

<div class="hour-item col-sm-1 col-ms-1 col-sm-offset-3 col-ms-offset-3"> 
    <div class="hour-label" id="hour-label-1"></div> 
    <div class="hour-value" id="hour-value-1"></div> 
    <div class="hour-weekd" id="hour-weekd-1"></div> 
</div> 

나머지는 거의 동일하고, 이너 DIV 식별 번호 단위 (-2, ... -6)

: 첫번째 열은 다음과 같이 정의된다

여기 내 목표는 가운데 div (시간 값 -x)를 항상 직선으로 정렬하는 것입니다. 그러나 문제는 첫 번째 내부 div의 텍스트가 두 번째 줄로 줄 서면 두 번째 줄을 아래로 밀어 내고 그 열은 다른 열과 수직으로 "잘못 정렬"됩니다.

이것을 달성하기위한 힌트가 있습니까? 미리 감사드립니다!

Answer 1

이 전에이 사이트에 여러 번 대답하고있다.

는이 작업을 수행 할 수있는 여러 가지 방법이 있지만 가장 좋은는 다른 내부 된 div의 높이에 맞게 일부 자바 스크립트를 사용하는 것입니다. Wes Duff가 게시 한 js는 좋지만 사용자가 브라우저 크기를 조정할 때와 같은 모든 상황을 다루지는 않습니다. match height과 같은 것을 사용하는 것이 좋습니다.

Answer 2

이것은 오래된 문제입니다. :? 내가 함께 올라와있다

솔루션은 자바 스크립트를 사용하는 것입니다.

function autoHeight(ele){ 
    var height = 0; 
    ele.each(function(){ 
    if($(this).height > height){ 
     height = $(this).height; 
    } 
    }).each(function() { $(this).height(height); }); 

루프를 통해 각 요소 각 요소에 가장 높은 높이를 지정의 높이를 찾을 수 있습니다.

<div class="hour-item col-sm-1 col-ms-1 col-sm-offset-3 col-ms-offset-3"> 
    <div class="hour-label" id="hour-label-1"></div> 
    <div class="hour-value" id="hour-value-1"></div> 
    <div class="hour-weekd" id="hour-weekd-1"></div> 
</div> 

//javascript (using jQuery) will look like 
autoheight($('.hour_value'));