在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