상위 div의 높이를 결정하고 하위 div에 대해 설정하는 방법은 무엇입니까?

Question

웹 사이트의 '블록 견적'상자를 만들고 가장자리 주위에 따옴표를 설정하는 데 어려움을 겪고 있습니다. 올바른 높이를 가질 수 없기 때문에 텍스트가 계속 줄 바꿈됩니다. 텍스트와 일치해야하며 전체 단락에 입력 내용 텍스트가 들여 쓰기되어야합니다.

나는 자신의 div의 내부에 인용 부호를 넣어했고 그에 따라 자신의 높이/폭을 설정하지만 동적으로 실제 인용 텍스트에있는 DIV의 높이를 결정 수없는 것.

I을 이것은 부모 div가 동적 인 특성으로 인해 특정 높이가 없기 때문에 의심 스럽지만 동적 인 높이를 설정하는 방법에 대해 완전히 확신 할 수는 없습니다.

페이지의 예는 여기에 있습니다 :

http://192.241.203.146/kim-dotcom-launches-mega-co-nz/ 

하지만 실제로이 이미지에서 볼 수 할 노력하고있어 예 :

코드립니다 사업부는 다음과 같습니다

<div class="span8"> 
    <div class="quotation qopen">“</div> 
    <div class="entry-content"> 
     <p>Schlitz magna whatever, aesthetic aliqua odio duis yr lomo american apparel 3 wolf moon meggings ullamco next level Truffaut. Ullamco ennui cillum, scenester plaid next level do bitters twee american apparel enim four loko. Proident eu cornhole, biodiesel umami bespoke velit est do jean shorts literally quis ut stumptown. Polaroid kitsch squid jean shorts, aliqua you probably haven&#8217;t heard of them qui beard sint id odio tofu veniam Schlitz sartorial. Disrupt placeat bicycle rights tousled letterpress. Mustache sartorial +1, vero next level squid non american apparel. Messenger bag Marfa hoodie anim you probably haven&#8217;t heard of them selvage, ugh gentrify accusamus PBR wayfarers Wes Anderson occupy.</p> 
     <div class="quotation qclose">”</div> 

CSS :이에

.quotation 
{ 
font-size:4.0em; 
font-weight:600; 
width:30px; 
height:100%; 
} 

.qopen 
{ 
float:left; 
width:30px; 
position: relative; 
} 

.qclose 
{ 
float:right; 
} 

.entry-content { 
font-size:1.0em; 
font-family: Agilis; 
line-height:150%; 
} 

어떤 도움을 크게 감상 할 수있다. 나는 며칠 동안 이것에 붙어 있었고 아직도 배우고있다 - 나는 그것이 바보 같은 질문이라고 확신한다.

Answer 1

요소 높이를 지정하지 않았습니다. 브라우저에서 계산할 수 있도록 남겨 두어야합니다. 당신이 의사 요소를 사용할 수, 인용 부호를 수행하는, 그런데 :

word-wrap: break-word; 

편집 :이 CSS 속성을 삽입해야합니다, 게다가 Jsfiddle

:

이 예제를 참조하십시오 :

HTML

<div class="container"> 
    <p class="quote">Schlitz magna whatever [...]</p> 
</div> 

나는 Jsfiddle 업데이트되었습니다

.container { 
    position: relative; 
    padding: 1em; 
    width: 350px; 
    display: inline-block; 
    word-wrap: break-word; 
} 
.container:before, .container:after { 
    content:'"'; 
    position: absolute; 
    font: 600 4em "Agilis", sans-serif; 
} 

.container:before { 
    top: -5px; 
    left: 0; 
} 

.container:after { 
    bottom: -15px; 
    right: 0; 
} 

CSS.

레오!

Answer 2

좋아, 이건 내가 생각했던 것처럼 까다롭지는 않았지만 질문에 대답하기 위해 jQuery를 사용했다. 동적 컨텐트가로드 된 후에 div의 높이를 동적으로 찾아야한다는 것을 알게되었습니다. 내가 사용

코드이었다

<script> 
$(document).ready(function(){ 
$(".qopen").height($(".entry-content").height()); 
}); 
</script>