너무 많은 내용이 추가되면 Div 컨테이너가 손상됩니다.

Question

각 레서피와 설명이있는 '상자'가 여러 개 포함될 페이지를 만들었습니다. 라이브 및 완전히 코딩 된 경우 (너무 빨리 추가되는 경우) . 지금 당장은 페이지가 잘 보일 경우 각 상자의 내용이 달라집니다. 그러나 컨테이너에 더 많은 설명 텍스트를 추가하여 레이아웃 테스트를 스트레스를받습니다.

이것은 결국 모든 PHP 등을 수행하는 개발자에게 넘겨 지겠지만 사람들이이 문제를 해결해야하는 아이디어가 궁금합니다 (PHP의 경우 최선을 다해 메시지/아이디어를 전달하십시오).

다음은 정상적으로 보이는 페이지의 라이브 URL입니다. - http://jordancharters.co.uk/testarea/boxes.html

여기는 동일한 페이지이지만 콘테이너의 내용이 너무 많습니다 (클라이언트가 처음 생각한 것보다 많은 텍스트를 추가 할 때 발생할 수 있음). 레이아웃을 분할합니다. - (. 임 단지 프론트 엔드 개발자) http://jordancharters.co.uk/testarea/boxes2.html

HTML 또는 PHP 등의 솔루션을 찾고

Answer 1

당신은 당신의있는 style.css 라인 (902)에 boxrecipes 컨테이너 클래스를 고정 높이를 제공해야합니다 overflow : overlay 속성을 추가하여 큰 텍스트가 스크롤 막대와 함께 표시되도록합니다. overflow : hidden은 고정 된 높이의 추가 텍스트를 숨기지 만 제목은 클릭 할 수 없으므로 "Recipe 선택"버튼을 볼 수있게하려면 오버플로가 오버레이 여야합니다.

는 아래의 코드는 당신이 당신의 블록에 스크롤 막대를 원하지 않는 경우가

.boxrecipes-container { 
padding: 10px; 
width: 430px; 
height: 230px; 
overflow: overlay; 
background-color: #eee; 
display: block; 
margin-right: 10px; 
margin-top: 20px; 
position: relative; 
float: left; 
}