如何確定父div的高度併爲子div設置？

我想爲一個網站建立一個「塊引用」框，並且很難在邊緣設置引號，文本不斷包裹它們，因爲我無法讓它們具有正確的高度。他們應該符合文本，並導致入口內容文本縮進整個段落。如何確定父div的高度併爲子div設置？

我已經把引號自己的div內，並相應地設置自己的高度/寬度，但我似乎無法動態地確定實際報價文本是在div的高度。

我懷疑這是因爲父母的div由於它的動態性質而沒有特定的高度，但我不完全確定如何去設置它的動態高度。

頁面的一個例子是在這裏：

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

但就是我實際上試圖做可在此圖像中可以看到的例子： enter image description here

代碼繪製股利是：

<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%; 
}

任何幫助將不勝感激。我一直堅持這幾天，我仍然在學習 - 我敢肯定這是一個愚蠢的問題。

來源

2013-07-07 Herp

您無法指定元素的高度。你必須讓瀏覽器爲你計算。

見這個例子：Jsfiddle

此外，你必須把這個CSS屬性：

word-wrap: break-word;

編輯：順便說一句，做引號，你可以使用僞元素：

HTML

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

CSS

.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; 
}

我已經更新了的jsfiddle。

獅子座！

來源

2013-07-07 03:39:38 leoMestizo

-1

好的，這並不像我想的那麼棘手，而是用jQuery來回答這個問題。我發現我需要在動態內容加載後動態查找div的高度。

我使用的代碼是：

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

來源

2013-07-07 04:01:07 Herp

我覺得你的問題是關於引號，不是？那麼，你不需要Jquery來查找'div'元素的高度，只需使用僞元素就可以了，就像我的例子。 – leoMestizo

是的，我現在只是搞亂你的代碼。這似乎是一個更好的解決方案。一旦測試會回覆你。 – Herp

如何確定父div的高度併爲子div設置？

回答

相關問題