Question

如何“杀死”此示例左上角的空格并实际使用“文本文本文本”使用该空格，有效地包裹在占位符div上？

当前（非工作）代码的示例：http://jsfiddle.net/bYZHd/

<!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

Answer 1

我已经更新了你的jsfiddle代码

这就是你要找的东西

http://jsfiddle.net/bYZHd/3/

为此，如果要保留现有的CSS，则需要在内容DIV中移动占位符

或者您可以将占位符置于绝对位置，如下所示

http://jsfiddle.net/bYZHd/4/

Answer 2

我对这个问题做了一些研究，并提出了另一个答案。

我使用的答案来自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>

Answer 3

您的占位符当前正在使用position：relative。这意味着占位符理论上占据了网页的左上角位置。然后占位符位置从其原始位置偏移100px。但页面上的其他元素不会改变以换行。

你想要的是将位置改为绝对。这将做我认为你希望它做的事情。

http://jsfiddle.net/bYZHd/2/

在DIV上方和周围环绕文本

3 个答案: