1

我查看了其他问题，但无法找到解决方案。考虑这张图片：样机 http://img201.imageshack.us/img201/935/image2h.png

我想包装 div 并将它们垂直堆叠。GREEN div 将是一行的包装器。蓝色 div 将包含一个 html 标签，并且可能包含工具提示的图标。ORANGE div 将包含某种条目（输入、选择、文本区域）。

其中几个将垂直堆叠以构成一个表格。我现在正在这样做，但是我必须为容器 div 指定一个高度，并且确实需要根据内容进行更改-考虑到任何条目都可能落在那里。图像和其他东西也可以在这里登陆。

我在 BLUE div 上设置了一个宽度，ORANGE 是 float:left。如何摆脱 div 的高度并让它由内容决定？有没有更好的办法？将所有内容更改为其他内容会很困难，并且更喜欢一种方式来设置所有元素或其他内容的样式。

我使用的代码是这样的：

<div class=EntLine>
    <div class=EntLbl>
      <label for="Name">Name</label>
    </div>
    <div class=EntFld>
      <input type=text id="Name" />
    </div>
</div>

CSS看起来像：

.EntLine {
  height: 20px;
  position: relative;
  margin-top: 2px;
  text-align: left;
  white-space: nowrap;
}

.EntLbl {
  float: left;
  width: 120px;
  padding: 3px 0px 0px 3px;
  min-width: 120px;
  max-width: 120px;
  vertical-align: text-top;
}

.EntFld {
  float: left;
  height: 20px;
  padding: 0px;
  width: 200px;
}
4

1 回答 1

1

好吧，首先，我认为您可以使用更少的加价来实现您的目标。您可能有充分的理由将 a 包裹div在表单的每个元素上，但如果只是将单个标签输入对强制到每一行，那么您可以input在label标签内嵌套：

      <label for="Name">Name
          <input type="text" id="Name" />
      </label>

这样你就可以使用一个简单的：

label {display: block; }

强制每对到自己的线路。这也将消除对floats的需要label，这消除了指定height任何包含元素的需要。

您仍然可以将多个类应用于相关字段/标签，但麻烦要少得多。除非我真的错过了什么。

如果所有这些都失败，您可以简单地在最后一个字段和样式之后添加一个空div（或其他元素）：

#empty_element {
disply: block;
height: 0;
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */
visibility: hidden;
}
于 2010-03-17T00:48:50.723 回答