Question

我希望左侧的项目使用float: left在同一行上有两个项目。

单独实现这一点我没有任何问题。问题是，即使您将浏览器调整为非常小的，我希望这两个项目保持在同一行上。你知道......就像桌子一样。

目标是保持右侧的项目不包含。

如何使用CSS告诉浏览器我希望拉伸包含div 而不是包装它，以便float: right; div低于float: left; div？

我想要的是什么：

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

Answer 1

另一个选择是，而不是浮动，将white-space属性nowrap设置为父div：

.parent {
     white-space: nowrap;
}

并重置白色空间并使用内联块显示，以便div保持在同一条线上，但您仍然可以给它一个宽度。

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

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

Answer 2

将您的浮动<div>包装在使用此跨浏览器最小宽度黑客的容器<div>中：

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

你可能也需要设置“溢出”，但可能不是。

这是因为：

!important声明与min-width相结合，导致IE7 +中所有内容都保持在同一行
IE6没有实现min-width，但它有一个错误，width: 100px会覆盖!important声明，导致容器宽度为100px。

Answer 3

将漂浮物包裹在一个div中，其最小宽度大于漂浮物的总宽度+边距。

不需要黑客或HTML表格。

Answer 4

解决方案1：

显示：table-cell（不广泛支持）

解决方案2：

表

（我讨厌黑客。）

Answer 5

另一种选择：不要漂浮你的右栏;只需给它一个左边距将其移动到浮点之外。你需要一两个修复IE6，但这是基本的想法。

Answer 6

您确定浮动的块级元素是解决此问题的最佳方法吗？

在我的经验中经常遇到CSS困难，事实证明我无法看到做我想要的事情的原因是我陷入了关于我的标记的隧道视野（思考“怎么可能我让这些元素做这个？“）而不是回头看看我需要实现什么，并且可能稍微改一下我的html来促进这一点。

Answer 7

将此行添加到浮动元素选择器

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

它会阻止填充和边框添加到宽度，因此元素始终保持在行中，即使您有例如。三个元素，宽度为33.33333％

Answer 8

当用户水平缩小窗口大小并且这会导致浮动垂直堆叠时，移除浮动并在第二个div（即浮动）上使用margin-top：-123px（您的值）和margin-left：444px（您的使用浮点数来定位div的位置。当这样做时，当窗口变窄时，右侧div保持原位并在页面太窄而不能包含它时消失。 ...（对我来说）比右边的div更好＆＃34;跳跃＆＃34;当浏览器窗口被用户缩小时，在左侧div下方。

Answer 9

我解决这个问题的方法是使用一些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());
});

如何将CSS浮动保持在一行？

10 个答案: