Question

我有一个充满文字的div（#bio）。内容来自数据库调用。然后我有另一个div是引用。我想把引号放在文本中，让它浮动：正确并从文本顶部得到约30％。

但我遇到了麻烦。我的引语总是出现在我的生物文本的末尾，而不是中间的某个地方。请问如何将报价注入生物文本的某个中间位置？

如果它有助于理解，生物文本中包含HTML段落。

HTML：

<div class="text">
            <h1></h1>
            <div class="quote"></div>
            <div id="bio"></div>
</div>

jquery的：

$.post("php/myfile.php", function(data){ //grab data from database via php
    var json = $.parseJSON(data); //parse the json so we can use it
    $.each(json, function(key, data) { 
        if (data.Country == 'USA') {
                            $('.text #bio').html(data.Notes);
            $('.quote').html('"' + data.Quote + '"');
            $('#bio').append($('.quote'));
            $('.quote').css({
                'margin-top': '30%',
                'float': 'right',
                'display': 'block'
            });

         }//end if
    });//end each   
   });//end post

CSS：

#bio .quote {
        color: lightgray;
        font-weight: bold;
        font-size: 150%;
        color: #333;
        font-family:"Lora", serif;
        line-height:1.7em;
        padding: 20px 0;
        border-top: 1px solid #afb0a9;
        border-bottom: 5px solid #bcd1d9;
        float: right;
        display: block;
    }

.text
        {
        margin-left: 256px;
        font-family:"Muli", sans-serif;
        font-size:12pt;
        line-height:1.7em;
        display: inline-block;
        position: relative;
        }
#bio { position: relative; }

Answer 1

您所寻找的并不是最容易实现的。我建议不这样做，但这是一个可能有用的通用解决方案。

您需要某种容纳所有文本的容器元素
测量该容器元素的offsetHeight的30％
在容器内找到第一个<p>标记，其中＆gt; = 30％向下
从DOM中获取quote元素并将其插入段落标记之前。

Answer 2

定位不需要JavaScript :) 报价上只有float:right并将其放在内容中（从一开始就约为30％）：

<p>One Two Three
<q>This is a quote</q>
Four Five Six Seven Eight Nine Ten</p>

使用CSS：

q {
    float: right;
}

必要的风格。

困难的部分是从顶部测量“30％”。也许在JavaScript中这样做，并在那里注入引号？

$('p').html(
    data.Notes.substr(0, data.Notes.length / 3) +
    "<q>" + data.Quote + "</q>" + 
    data.Notes.substr(data.Notes.length / 3, data.Notes.length)
);

这是一个JSFiddle来演示：http://jsfiddle.net/sX6EW/2/

Answer 3

$("#bio p:nth-child(3)").append($('.quote'));

（在生物的第三段之后追加引用）

位置文本div中的浮动元素

3 个答案: