强制 div 在同一行

Question

我正在尝试制作一个带有文本的 div 和一个带有按钮的 div 并排放置。在您使屏幕真正变窄之前，它可以正常工作。有没有办法强制它们在同一行并让第一个 div 缩小以适应第二个的 min-width？

http://jsfiddle.net/C3877/9/

要明白我的意思，调整窗口大小，减小宽度，直到带有按钮的 div 被强制到第二行。这就是我想要阻止的。

注意：我只关心建议的修复是否在 Chrome 中正常工作。

Answer 1

您可以使用display: inline-block，而不是浮点数。这将使所有事情都集中在一条线上，并尊重min-width。

内联块小提琴：http://jsfiddle.net/C3877/8/

另外，既然你只关心 Chrome，你可以看看flexible boxes

这里有一个（快速）flex fiddle：http://jsfiddle.net/C3877/11/

Answer 2

您可以对浮动右元素使用负数margin-left。请注意，此解决方案对左右 div 都使用浮点数，不使用浮点数，您有几十个解决方案（正如其他一些答案所指出的那样）。

#right_div {
...
   margin-left:-100%;
}

请注意，所有下一个内容都应包装在块元素中并使用clear:both。我还在此DEMO 中添加了带有background:green 的此类元素的示例。

Answer 3

我认为添加这个可以解决问题：

@media (max-width:515px) {
    #left_div { width: 100%; margin-right: -100px }
}

Answer 4

更新

您可以使用边距和绝对定位：

CSS

#parent_div {
    width: 100%;
    height: 10%;

        position: relative;
        min-width: 40px;

}

#left_div {
    width: 80%;
    min-width: 100px;
    height: 80%;
    float: left;
    background-color: #000;
    color: #FFF;
}

#right_div {
    width: 15%;
    min-width: 100px;
    float: right;
    background-color: blue;
     position:absolute;
        right: 0px;
}

input[type=button] {
    font-size: 2rem;
}

查看演示：http://jsfiddle.net/C3877/19/

当您在您的网站上移动它时，您必须使用一些 css 才能使其恰到好处。但这肯定是一个快速的解决方案。