1. 首页
  2. 问答
  3. 事业部，placeeholder，可自动调整宽度，内容和对齐

事业部，placeeholder，可自动调整宽度，内容和对齐

2013-10-04 27 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

相关问题

 相关问题