단락 높이를 다른 div의 이미지 높이로 제한

반응 형 블로그 사이트에 두 개의 열 레이아웃을 사용하고 있습니다. 왼쪽 열에는 열 너비를 채우기 위해 확대 된 이미지가 사용되고 오른쪽 열에는 블로그 게시물의 텍스트가 추출됩니다.단락 높이를 다른 div의 이미지 높이로 제한

오른쪽 열의 텍스트 단락 높이를 브라우저 너비가 축소되면서 왼쪽 열의 이미지 높이와 어떻게 일치 시킬지에 대한 아이디어는 있습니까?

오른쪽 div의 텍스트 오버 플로우를 처리하기 위해 text-overflow : 줄임표를 사용할 계획입니다.

아래 이미지의 예와 그 이후.

Example before and after resizing browser

다음은 HTML의 및 CSS 나는 브라우저 윈도우의 크기가 감소함에 크기를 조정하기 위해 이미지의 크기를 설정하는 데 사용했습니다.

<div class="row blogpost"> 
    <div class="sevencol"> 
     <img src="img/greybox.png"> 
    </div> 
    <div class="fourcol last> 
     <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
     </p> 
     <a class="readMore" href="#">Read More...</a> 
    </div> 


.blogpost .sevencol img { 
     zoom: 2; 
     margin: auto; 
     height: auto; 
     max-height: 100%; 
     width: auto; 
     max-width: 100%; 
     margin-top: 8px; 
    }

출처

2012-06-05 jasonbradberry

아직이 하나에 붙어 있습니다 - 아무도 도와 줄 수 있습니까? 아래 해결 방법 중 아무 것도 작동하지 않는 것 같습니다. – jasonbradberry

일반적으로 JavaScript로이 작업을 수행합니다.

페이지가 렌더링되면 이미지 컨테이너의 높이를 평가 한 다음 캡션 컨테이너에 동일한 높이를 적용합니다.

오버 플로우 효과를 적용하려는 길이의 단락에서 "더 많은 내용보기"링크 콘텐츠를 분리해야 할 수도 있습니다.

당신이 jQuery를 사용하는 가정하면,이 같은 것을 볼 수 있습니다

$(document).ready(function(){ 
    var imgHeight = $('#imageContainer').height(); 
    $('#caption').css('height', imgHeight); 
});

출처

2012-06-05 10:41:53 Claude

감사합니다. 조금 더 설명해 주시겠습니까? jQuery를 처음 사용합니다. – jasonbradberry

이

http://jsfiddle.net/ZGyhr/

var h = $('img').height(); 
$('.fourcol').css('height',h+'px');

을 시도하고 오른쪽의 div overfloe-y:scroll;을 설정

출처

2012-06-05 10:54:17 Valli69

감사합니다.이 사진을 보았지만 이미지의 높이와 일치하도록 오른손 div의 높이를 설정하지 않은 것 같습니다. 더 설명해 주시겠습니까? – jasonbradberry

죄송합니다. 방금이 작업을하고 div에 색이있는 배경을 붙였습니다. 이미지의 높이와 일치하도록 변경되었습니다. 감사합니다. 이제 나는'text-overflow : 생략 부호 '를 얻을 필요가 있습니다 - 왜 작동하지 않을까요? http://jsfiddle.net/ZGyhr/ – jasonbradberry

어디에서 text-overflow가 필요합니까? 줄임표; – Valli69

정말로 CSS를 사용하여 블로그의 크기를 제한하려면 텍스트를 입력하면 표시 크기를 고정하여이 작업을 수행 할 수 있습니다.

.blogpost .last p{max-height: 300px;/*this is the height how much text you want to show up*/line-height:20px;/*set it this way that there will no cut off text*/ overflow:hidden;}

그러나이 방법으로는 사용하지 마십시오. 텍스트를 제한하려면 블로그 스크립트에서이 작업을 시도해야합니다.

출처

2012-06-05 11:06:49 maksbd19

단락 높이를 다른 div의 이미지 높이로 제한

답변

관련 문제