位置浮動元素文本div內

我有一個div（#bio），它是充滿了文本。內容來自數據庫調用。然後我有另一個引用的div。我想把這個引用放到文本中，讓它浮動：正確，並且從文本的頂部開始大約30％。位置浮動元素文本div內

但是我遇到了麻煩。我的引用總是出現在我的生物文本的末尾，而不是中間的某處。請問我怎樣才能把這個報價注入生物課文的某個地方？

如果它有助於理解，生物文本在整個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; }

來源

2014-04-29 LauraNMS

你要找的是不是最容易實現的。我會建議而不是這樣做，但這是一個可能有效的通用解決方案。

你需要某種容器元素是包含所有文本
措施30容器元素
的的offsetHeight％的查找是> = 30％的容器內的第一<p>標籤一路下來
從DOM中摘取quote元素並將其插入段落標記之前。需要

來源

2014-04-29 16:55:56

是什麼讓你不推薦這樣做？ – LauraNMS

這幾乎是解決方案 - 我最終使用$（「＃bio p：nth-child（3）」）。append（$（'。quote'））; （在生物的第三段後添加報價） – LauraNMS

沒有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/

來源

2014-04-29 17:01:02

無法做到這一點 - 它來自數據庫，其他用戶填寫。 – LauraNMS

@LauraNMS編輯。動態生成內容的關鍵是插入'q'標記的位置。 –

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

（追加報價的生物之後的第三款）

來源

2014-04-29 17:07:51 LauraNMS

但是，如果'＃bio'只有3段或100段，那實際上不會達到30％...... –

位置浮動元素文本div內

回答

相關問題