在DIV上和周圍環繞文字

如何「殺死」此示例左上角的空格，並且實際上讓「文本文本文本」使用該空格，並有效地覆蓋佔位符div？當前（非工作）代碼在DIV上和周圍環繞文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style> 
     #parent 
     { 
      background-color: Orange; 
      height: 600px; 
      width: 600px; 
     } 

     #placeholder 
     { 
      background-color: Navy; 
      height: 500px; 
      width: 100px; 
      position: relative; 
      top: 100px; 
      left: 0px; 
      float: left; 
      display: inline-block; 
     } 
     #content 
     { 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div id="parent"> 
      <div id="placeholder"></div> 
      <div id="content"> 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      </div> 
     </div> 
    </form> 
</body> 
</html>

圖形我想要的東西： enter image description here

來源

2012-02-14 codechurn

好的問題:) – 2012-02-14 01:05:18

我已經做了在這個問題上多一點研究，並提出了一個替代的答案。

我使用的答案來自here，但可以從this Stack Overflow question找到更全面的可能解決方案列表。首先，請確認我已經完成了你想要的任務。 http://jsfiddle.net/bYZHd/7/

我使用了包含「推動器」元素的解決方案。在父緩衝區外放置一個空的div，給它一個高度，將它浮動到左邊並清除它。然後，佔位符元素將不必調整其位置。

一般來說，在CSS元素上方纏繞文本並不容易。鏈接中給出的答案提到必須使用JS手動調整推杆元件的高度。但就你而言，你確切知道你的佔位符距離頂端有多遠，所以你可以對高度進行硬編碼。

下面是編輯的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style> 
     #parent 
     { 
      background-color: Orange; 
      height: 600px; 
      width: 600px; 
     } 

     #buffer 
     { 
      float: left; 
      height: 80px; 
     } 
     #placeholder 
     { 
      background-color: Navy; 
      height: 500px; 
      width: 100px; 
      position: relative; 
      top: 0px; 
      left: 0px; 
      float: left; 
      clear: left; 
      display: inline; 
     } 
     #content 
     { 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div id="buffer"></div> 
     <div id="parent"> 
      <div id="placeholder"></div> 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
      text text text text text text text text text text text text text text text text text text text text text 
     </div> 
    </form> 
</body> 
</html>

來源

2012-02-15 19:44:30 Roman

這正是我正在尋找的！它正是我想要它做的。 – codechurn 2012-02-16 01:43:44