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

这里有一个（快速）弯曲小提琴：http://jsfiddle.net/C3877/11/

Answer 2

<强>已更新

您可以使用保证金和绝对定位：

<强> 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才能正确使用它。但这是一个肯定的快速修复。

Answer 3

您可以对浮动的右侧元素使用否定margin-left。请注意，此解决方案继续使用float 用于左侧和右侧div，而不使用float，您有许多解决方案（正如其他一些答案所指出的那样）。

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

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

Answer 4

我认为附加了这个技巧：

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

强制div在同一行

4 个答案: