Question

我正在尝试为网站构建一个“块引用”框，并且很难在边缘周围设置引号，文本会一直缠绕它们，因为我无法让它们具有正确的高度。它们应与文本一致，并使条目内容文本在整个段落上缩进。

我将引号放在他们自己的div中，并相应地设置了它们的高度/宽度，但我似乎无法动态确定实际引用文本所在的div的高度。

我怀疑这是因为父div没有特定的高度，因为它具有动态性，但我不完全确定如何设置动态的高度。

该页面的一个示例如下：

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

但是，在此图片中可以看到我实际尝试做的事情的示例： enter image description here

绘制div的代码是：

 <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

您没有指定元素的高度。您必须保留浏览器为您计算的内容。

请参阅此示例：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。

利奥！

Answer 2

好吧，这并不像我想象的那么棘手，但是让jQuery回答了这个问题。我发现在动态内容加载到div之后我需要动态地找到div的高度。

我使用的代码是：

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

如何确定父div的高度并为子div设置？

2 个答案: