如何使CSS浮动在一行中? [英] How do I keep CSS floats in one line?

问题描述

我想在同一行上有两个项目，左边的项目是float: left.

我没有任何困难可以单独实现这一目标.问题是，即使您将浏览器的尺寸调整得很小，我也希望两个项目保持在同一行上.您知道...就像桌子一样.

目标是无论包裹什么物品，都不要将其包裹在右边.

如何使用CSS告诉浏览器，我宁愿拉伸包含的div 而不是将其包装，以使float: right; div位于float: left; div之下?

我想要什么:

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

解决方案

将浮动<div>包裹在使用此跨浏览器最小宽度hack的容器<div>中:

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

您可能还需要设置溢出"，但可能不需要.

之所以有效，是因为:

• !important声明与min-width结合使用会使所有内容在IE7 +中保持同一行
• IE6没有实现min-width，但是它有一个错误，例如width: 100px会覆盖!important声明，从而导致容器宽度为100px.

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.

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?

what I want:

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

解决方案

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; }

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

This works because:

• 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屋！