-3

これが私のリクエストの画像です

これが私のリクエストの画像です

私はCSSとHTMLの配置が初めてです。インライン エディターを作成するために、この処理を実現するために 3 日間を費やしました。これらの条件に合う行動を3<div>つ以上保持できるようにしたいです。<span>

  1. 本体は任意のコンテナーにすることができます。
  2. ピンクの Div は何でもかまいませんが、他の 3 つのスペース ホルダーをインラインで含める必要があります。
  3. 左の緑色のボックスは、ラベルのような可変長のテキスト用です
  4. 右の緑のボックスは、ボタンまたはアイコンとして表される可変数のアクション用です。
  5. 中央の緑色のボックスは、入力テキストやコンテナー内の複数フィールドなどのエディター用です。

私がやったこと、ハハハ、あらゆる種類のフレームワークを試している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>
4

2 に答える 2

0

最後に、これは実行可能な CSS ではありません...私は JQuery で成功します....

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

CSSだけではできないことがあります... JQueryに感謝します:)

于 2013-10-10T14:18:12.927 に答える
0

以下のリンクが参考になると思います。

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

于 2013-10-04T13:30:09.433 に答える