首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 前端 > 正文

CSS浮动 - 如何将它们保持在一条线上？

作者：围脖上的博博_771 | 2023-09-03 11:30
如何解决《CSS浮动-如何将它们保持在一条线上？》经验，为你挑选了5个好方法。

我希望在同一行上有两个项目,左边的项目使用'float:left'.

单凭这一点我没有任何问题.问题是,即使你非常小的浏览器调整大小,我希望这两个项目保持在同一行.你知道......就像桌子一样.

无论如何,目标是保持右边的物品不被包裹.

那么如何告诉浏览器使用css我宁愿拉伸包含div而不是包装它以便float: leftdiv 在div之下div？

例如:我想要的:

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

Innovaat.. 130

另一种选择是,而不是浮动,将white-space属性nowrap设置为父div:

.parent {
     white-space: nowrap;
}

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

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

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



1> Innovaat..：

另一种选择是,而不是浮动,将white-space属性nowrap设置为父div:

.parent {
     white-space: nowrap;
}

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

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

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

绝对是我见过的最好的解决方案.它适用于我的用例,但我想知道它的支持程度如何.幸运的是,将浮动物用于一切正慢慢成为过去.
@AnirudhanJ这不太难.内联块使元素以内联文本正常流动(但保留了块的一些填充/边距能力),并且*字面上*只是告诉CSS不要使用white-space:nowrap选项包装文本(应用"正常"再次给孩子,以避免它传播到一切)

2> Eric Wendeli..：

将浮动

s 包装在
使用此跨浏览器最小宽度hack 的容器中:

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

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

这是因为:

该!important声明与min-widthIE7 +中的所有内容保持一致

IE6没有实现min-width,但它有一个错误,它width: 100px会覆盖!important声明,导致容器宽度为100px.

唯一的问题是它强制固定的最小宽度.
这不是一个解决方案,它只是一个最小宽度,当你的内容变得非常小(见问题),所以低于100px你有同样的问题.特别是对于表格单元格,这仍然存在问题.

3> 小智..：

将您的浮动体包裹在div中,其最小宽度大于浮动体的总宽度+边距.

不需要hacks或HTML表.



4> pkario..：

解决方案1:

display:table-cell(不广泛支持)

解决方案2:

表

(我讨厌黑客.)



5> Steve Clay..：

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

推荐阅读
devbox
围脖上的博博_771
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有