1. 首頁
  2. 問答
  3. 事業部，placeeholder，可自動調整寬度，內容和對齊

事業部，placeeholder，可自動調整寬度，內容和對齊

2013-10-04 29 views
-3

這裏是我的要求的圖像事業部，placeeholder，可自動調整寬度，內容和對齊

Here is an image of my request

我是新來的CSS和HTML的定位。我花了三天的時間嘗試實現這種配置來創建一個內聯編輯器。我希望能夠持有3 <div>或<span>或滿足這些條件的任何行爲。

  1. 身體可以是任何容器。
  2. 粉紅事業部可以是任何東西，但必須包含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>

來源

2013-10-04 Brainarts

+1

到目前爲止你做了什麼？ –

+2

我們在這裏幫助你，而不是做你的工作。到目前爲止，你有什麼想法？ – linkyndy

+0

SO並不是您要求其他人爲您編寫代碼的地方。您可以從這裏獲得幫助，解決您已經嘗試自行解決的編碼問題。 – j08691

回答

0

最後，這不是CSS可行的......我要想在它使用jQuery ....

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

有事情CSS不能單獨做...謝謝JQuery的:)

來源

2013-10-10 14:18:12 Brainarts

相關問題

 相關問題