0

所以考虑我有这两种情况:

这里是左边div中的文本比右边div中的输入元素长的一般情况。

如何将包装器的大小指定为与正确的 div 元素长度相同,并且在相同的情况下,正确的 div 输入元素在包装器的底部对齐,就像在我的第一个 jsfiddle 示例中一样?

我还在苦苦挣扎的是另一种情况,即右侧 div 中只有四个文本中的一个,而左侧 div 中只有按钮。

如何将包装器重新调整为一行并使用与第一个场景相同的 CSS 样式内联显示元素?

请给我一些指示,因为我在随机尝试时很生气

  • height: auto;
  • min-height: 50px;

以及我在网上找到的其他 CSS 属性。

我仍然注意到,如果不div为包装器指定固定大小,就无法让正确的输入元素与底部对齐,是否有任何解决方法并避免使用table标签?

这是我正在谈论的两种场景的在线涂鸦:示例

请记住,左右 div 元素的内容是可变的,我摆弄的两个例子是极端情况:

  1. 左 div 内容比右 div 内容与底部对齐的右 div 更长。

  2. 左右 div 具有相同的内容大小,因此包装器在一行上显示内容(左 div 文本和右 div 按钮)。

4

2 回答 2

1

检查您的图形后,我认为您的要求没有 CSS 方式。使用仿列方法并将正确的内容固定或绝对定位在底角是否是一种解决方案?

http://alistapart.com/article/fauxcolumns

<div style="width:400px;position:relative;">
    <div style="height: 200px; width:250px;">left</div>
    <div style="height: 50px; width:150px;position: absolute;right: 0; bottom: 0;">right</div>
</div>

http://jsfiddle.net/26V6E/

于 2013-10-01T12:47:49.623 回答
0

你试过吗:高度:100%?

于 2013-10-01T12:24:16.127 回答