Question

这是我的请求的图片

Here is an image of my request

我是CSS和HTML定位的新手。我花了三天时间尝试实现这种处理以创建内联编辑器。我希望能够容纳3 <div>或<span>或满足这些条件的任何行为。

身体可以是任何容器。
Pink Div可以是任何东西，但必须包含另外3个其他空间持有者内联
左绿框用于可变文本长度，如标签
右侧绿色框表示可变数量的操作，表示为按钮或图标。
中心绿色框用于输入文本或容器内的多个字段等编辑器。

我做了什么，哈哈哈，探索每个伪专家网站上的css定位尝试所有类型的框架，从来没有找到一种方法来实现这个简单，清晰，易于维护，没有任何类型的黑客....这是我做了什么。

这是我的代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />

    <style>
        div.EditorFrame {
            background-color: lightcyan;
            padding: 5px;
        }

        span.LabelPanel {
            display: inline-block;
            background-color: lightskyblue;
        }

        span.EditorPanel {
            display: inline-block;
            background-color: lightpink;
        }

        span.ButtonPanel {
            display: inline-block;
            text-align: right;
            background-color: lightgreen;

        }
    </style>

    <script type="text/javascript">
        function body_onload() {
            //var editor = document.getElementById("txtAddress");
            //var editorcontainer = editor.parentElement;
            //editor.width = editorcontainer.clientWidth;
        }
    </script>
</head>

<body onload="body_onload()">
    <div class="EditorFrame">
        <span class="LabelPanel">
            <label for="AddressEditor" id="lblAddressEditor">Enter an address</label>
        </span>
        <span class="EditorPanel">
            <input id="AddressEditor" type="text" /></td>                
        </span>
        <span class="ButtonPanel">
            <button type="submit">Add</button>
            <!--button>Cancel</!--button>-->
        </span>
    </div>
</body>

</html>

Answer 1

我认为以下链接可以帮助您。

http://digitalbush.com/projects/masked-input-plugin/

Answer 2

最后，这不是CSS可行的......我用JQuery成功了....

EditorPanelWidth = EditorFrame.innerWidth() - LabelPanel.outerWidth() - ButtonPanel.outerWidth();
EditorPanel.outerWidth(EditorPanelWidth);
AdressEditor.width = EditorPanel.innerWidth();

有CSS不能单独做的事情......感谢JQuery：）

Div，placeeholder，autofit可用宽度，内容和对齐方式

2 个答案: