如何确定父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设置？

回答

相关问题