我如何保持CSS浮动在一行?

我想在同一行上使用float: left表示左边的项。

我一个人做到这一点没有问题。问题是，我希望这两个项目保持在同一行，即使您将浏览器调整到非常小。你知道的…就像桌子一样。

这样做的目的是让右边的物品无论如何都不会被包装。

我如何使用CSS告诉浏览器，我宁愿拉伸包含的div而不是包装它，所以float:右;Div在float的下面:left;div吗?

我想要的是:

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

当前回答

你确定浮动块级元素是这个问题的最佳解决方案吗?

在我的经验中，经常遇到CSS困难，结果证明我看不到做我想做的事情的方法的原因是我陷入了关于我的标记的隧道视野(思考“我如何让这些元素做到这一点?”)而不是回头看看我到底需要实现什么，可能会稍微重做我的html来促进它。

2008-11-05 17:54:47

其他回答

解决方案1: 显示:table-cell(不广泛支持) 解决方案2: 表 (我讨厌黑客。)

2008-11-08 07:21:16

另一个选择是，不使用浮动，而是将空白属性nowrap设置为父div:

.parent {
     white-space: nowrap;
}

并重置空白和使用内联块显示，这样div保持在同一行，但你仍然可以给它一个宽度。

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

这是一个JSFiddle: https://jsfiddle.net/9g8ud31o/

2012-04-02 14:26:44

另一种选择:不要浮动右列;只要给它一个左边距来移动它超出浮动。你需要一两个黑客来修复IE6，但这是基本的想法。

2008-11-05 23:15:28

用最小宽度大于浮动体的组合宽度+边距的div包装浮动体。

不需要黑客或HTML表格。

2011-04-05 05:10:09

我建议使用表格来解决这个问题。我有一个类似的问题，只要表格只是用来显示一些数据，而不是主页的布局，这是好的。

2010-07-26 16:03:39

我如何保持CSS浮动在一行?

推荐文章

最新文章

标签