CSS浮动 – 我怎么让他们在一条线？
我想要在左边的项目中使用'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。
另一种select是，而不是浮动，将white-space属性nowrap设置为父div：
.parent { white-space: nowrap; }
并重置白色空间，并使用行内块显示，使div保持在同一行，但你仍然可以给它一个宽度。
.child { display:inline-block; width:300px; white-space: normal; }
这里是一个JSFiddle： https ：//jsfiddle.net/9g8ud31o/
将您的飞行物包裹在一个宽度大于浮游物的宽度+边距的最小宽度上。
没有hacks或HTML表格需要。
解决scheme1：
显示：表格（不广泛支持）
解决scheme2：
表
（我讨厌黑客。）
另一种select：不要浮动你的右栏; 只要给它一个左边的余量就可以把它移动到浮动点之外。 你需要一两个修复IE6，但这是基本的想法。
你确定浮动的块级元素是这个问题的最佳解决scheme吗？
在我的经验中，经常遇到CSS困难，事实certificate，我不能看到我想要做的事情的一个方法，就是我陷入了一个关于我的标记的隧道视野（思考“我怎样才能使这些元素做到这一点 ？“），而不是回头看看究竟是什么，我需要实现，也许稍微修改我的HTML来促进这一点。
我build议使用表格来解决这个问题。 我有一个类似的问题，只要表只是用来显示一些数据，而不是主页面布局就好了。
将此行添加到您的浮动元素select器
.floated { float: left; ... box-sizing: border-box; }
它将防止填充和边框被添加到宽度，所以元素总是保持在行，即使你有例如。 三个元素宽度为33.33333％
当用户水平缩小窗口大小，并导致浮动垂直堆叠，删除浮动和第二个div（这是一个浮动）使用margin-top：-123px（你的值）和margin-left：444px（你的值）定位divs，因为他们出现与浮游物。 当这样做的时候，当窗口变窄时，右侧div保持原位并在页面太窄而不能包含它时消失。 …对我来说，当浏览器窗口被用户缩小的时候，比右侧div跳到左侧div下面要好。
我解决这个问题的方法是使用一些jQuery。 我这样做的原因是因为A和B是百分比宽度。
HTML：
<div class="floatNoWrap"> <div id="A" style="float: left;"> Content A </div> <div id="B" style="float: left;"> Content B </div> <div style="clear: both;"></div> </div>
CSS：
.floatNoWrap { width: 100%; height: 100%; }
jQuery的：
$("[class~='floatNoWrap']").each(function () { $(this).css("width", $(this).outerWidth()); });
