div의 정보를 항상 특정 줄 수와 함께 표시하십시오.

Question

div의 정보를 항상 특정 수의 줄 내에서 표시하는 방법에 대한 질문이 있습니다.

JSFiddle 내부의 구조와 같이, div에는 3 가지 종류의 정보가 표시됩니다. 때로는 각각 한 줄로 만 짧을 수도 있지만 때로는 여러 줄로 긴 이름으로 표시 될 수도 있습니다. 그리고 때때로 나타날 수도있는 "<p class="promotion-content">"에 대해.

그래서 내가 원하는 것은 div의 정보가 항상 3 줄 이내로 표시된다는 것입니다. "프로모션 콘텐츠"내에 정보가있는 경우 프로모션 콘텐츠 만 표시되며 3 줄 미만의 정보라도 3 줄 높이가 유지됩니다.

프로모션이 포함되지 않은 경우 브랜드 이름과 제품 이름 만 표시되며 3 줄 높이로 제한됩니다. 그러나 두 이름이 모두 2 줄 밖에없는 경우, 나는 여전히 빈 3을 가질 것입니다. HTML 및 CSS로 각 제품에 대해
을 혼자 추가하는 것 외에 다른 작업을 할 수 있습니까?

나는이 모든 작업을 혼동하고 있으며 높이 제한을 시도했지만 작동하지 않는 것 같습니다. 나는 그들이 HTML과 CSS 트릭으로 할 수 있는지 궁금해하니 ?? 누군가 내게 그것에 어떤 방향을 주시겠습니까? 감사!!!

Answer 1

당신은

은 CSS에서 HTML

<div class="information"> 
     <p class="promotion-content"> 
     Buy 1 Get 1 Free 
     </p> 
     <p class="brand-name"> 
     ABC Brand 
     </p> 
     <p class="product-name"> 
     Product Name 
     </p> 
    </div> 

에서

.information { 
     min-height:120px; 
     border: 1px solid #ddd; 
    } 

는이 JSFiddle

사용할 수