html - 带有浮动元素的 Div 流体

Question

看下面的代码：http://jsfiddle.net/B2wFZ/
如果你的分辨率是1366x768你会看到输入与文字一致，尝试缩小，输入不再与文字一致。如何确保 div 在必要时使用 min-width 变宽？现在如果我更换：

width: 350px;

和

min-width: 350px; 

宽度变为 100%。如何解决？

Answer 1

比如浮动左边的 div 宽度为 60%，右边的宽度可以是 40%，而里面的输入可以有 100% 的宽度来占据整个 div 的宽度。

或者你可以浮动左边的 div 并给出第二个：

.input { position: relative; overflow: hidden; } 

这是一个例子

Answer 2

使用 min-width 并应用以下属性之一，这将导致 div “收缩包装”到最小宽度：

display:inline-block;
display:table;
float:left;
display:table-cell;

可能还有更多。

我选择了向左浮动，但其他人也很好，特别是如果您希望将 div 居中。

这里有一个演示：http: //jsfiddle.net/m5UYx/