CSS浮动 - 我如何保持他们在一条线？ [英] CSS floats - how do I keep them on one line?

问题描述

我想在同一行上使用'float：left'作为左侧项目的两个项目。

I want to have two items on the same line using 'float: left' for the item on the left.

我没有遇到任何问题。问题是，我希望这两个项目保持在同一行，即使当您调整浏览器非常小。

I have no problems achieving this alone. The problem is, I want the two items to stay on the same line even when you resize the browser very small. You know... like how it was with tables.

我们的目标是保持项目在右边，不管是什么东西。

The goal is to keep the item on the right from wrapping no matter what.

那么如何告诉浏览器使用css，我宁愿拉伸包含div 而不是换行，所以 float：right; div低于 float：left; div？

So how to I tell the browser using css that I would rather stretch the containing div than wrap it so the the float: right; div is below the float: left; div?

示例：
我想要的：

example: what I want:

                                             \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

推荐答案

在一个容器< div> 中使用这个交叉连接来包装你的浮动< div> browser min-width hack：

Wrap your floating <div>s in a container <div> that uses this cross-browser min-width hack:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

您 也需要设置overflow，但可能不是。

You may also need to set "overflow" but probably not.

这是因为：

• ！important 声明，结合 min-width ，使所有内容保持在IE7中的同一行


• IE6没有实现 min-width ，但它有一个错误，使 width：100px 覆盖 ！important 声明，导致容器宽度为100像素。

• The !important declaration, combined with min-width cause everything to stay on the same line in IE7+
• IE6 does not implement min-width, but it has a bug such that width: 100px overrides the !important declaration, causing the container width to be 100px.

这篇关于CSS浮动 - 我如何保持他们在一条线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！