0

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

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

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

该页面的示例如下：

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

但是在这张图片中可以看到 我实际尝试做的一个例子：在此处输入图像描述

绘制 div 的代码是：

 <div class="span8">
    <div class="quotation qopen">“&lt;/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">”&lt;/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%;
}

对此的任何帮助将不胜感激。我已经坚持了几天并且仍在学习 - 我敢肯定这是一个愚蠢的问题。

4

2 回答 2

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。

狮子座！

于 2013-07-07T03:39:38.097 回答
-1

好吧，这并不像我想象的那么棘手，而是用 jQuery 来回答这个问题。我发现我需要在动态内容加载到其中后动态查找 div 的高度。

我使用的代码是：

<script>
$(document).ready(function(){
$(".qopen").height( $(".entry-content").height() );
});
</script>
于 2013-07-07T04:01:07.200 回答