如何使用 CSS 并排浮动 3 个 div?
我知道如何让 2 个 div 并排浮动,只需将一个向左浮动,另一个向右浮动即可。
但是如何使用 3 个 div 来做到这一点,或者我应该仅使用表格来实现此目的?
I know how to make 2 divs float side by side, simply float one to the left and the other to the right.
But how to do this with 3 divs or should I just use tables for this purpose?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(16)
只需给它们一个宽度和
float: left;
,这是一个例子:Just give them a width and
float: left;
, here's an example:现代方法是使用 CSS flexbox,请参阅支持表。
您还可以使用 CSS 网格,请参阅支持表。
The modern way is to use the CSS flexbox, see support tables.
You can also use CSS grid, see support tables.
这与处理两个 div 的方式相同,只需将第三个 div 也向左或向右浮动即可。
It is same way as you do for the two divs, just float the third one to left or right too.
将它们全部向左浮动,
确保指定了宽度,以便它们都可以放入其容器(另一个 div 或窗口)中,否则它们将换行
float them all left
make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap
有人在那里发布的代码,它成功了!
当我在关闭容器 DIV 之前粘贴它时,它有助于清除所有后续 DIV 与我在顶部并排创建的 DIV 重叠!
塔达!! :)
that code that someone posted up there, it did the trick!!!
when i paste it just before closing the Container DIV, it helps clear all subsequent DIVs from overlapping with the DIVs i've created side-by-side at the top!
tadaa!! :)
将所有三个 div 浮动到左侧。就像这里:
Float all three divs to the left. Like here:
这种方式的优点是,只要将其保持在 100% 以下,您就可以将每个列的宽度设置为独立于其他列,如果您使用 3 x 30%,则剩余的 10% 将被分割为列之间的 5% 分隔空间
the advantage of this way is you can set each column width independant of the other as long as you keep it under 100%, if you use 3 x 30% the remaining 10% is split as a 5% divider space between the collumns
我通常只是将第一个浮动到左侧,第二个浮动到右侧。然后第三个会自动在它们之间对齐。
I usually just float the first to the left, the second to the right. The third automatically aligns between them then.
您可以将它们全部浮动:左侧并将宽度设置为 33.333%
you can float: left for all of them and set the width to 33.333%
尝试将“display: block”添加到样式中
try to add "display: block" to the style
我没有看到引导程序的答案,所以它的价值是什么:
让引导程序计算出百分比。
我喜欢把两者都清除,以防万一。
I didn't see the bootstrap answer, so for what's it's worth:
let Bootstrap figure out the percentages.
I like to clear both, just in case.
我更喜欢这种方法,旧版本的 IE 中对浮点数的支持很差(真的吗?...)
更新:
当然,要使用这种技术,并且由于绝对定位,您需要将 div 封装在容器上,并进行后处理来定义 if 的高度,如下所示:
不是世界上最令人惊奇的事情,但至少没有不会破坏旧版 IE。
I prefer this method, floats are poorly supported in older versions of IE (really?...)
UPDATED :
Of course, to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if, something like this:
Not the most amazing thing in the world, but at least doesn't break on older IEs.
但它在 Chrome 中有效吗?
浮动每个 div 并设置为清除;两者均适用于行。如果您不想,则无需设置宽度。适用于 Chrome 41、Firefox 37、IE 11
点击 JS Fiddle< /strong>
HTML
CSS
But does it work in Chrome?
Float each div and set clear;both for the row. No need to set widths if you dont want to. Works in Chrome 41,Firefox 37, IE 11
Click for JS Fiddle
HTML
CSS
以下是我如何在
CSS:
Here's how I managed to do something similar to this inside a
<footer>
element:CSS:
@Leniel 这个方法很好,但你需要为所有浮动 div 添加宽度。我想说的是让它们相等宽度或分配固定宽度。例如,
您可以为每个 div 分配类名,而不是添加内联样式,这不是一个好的做法。
请务必使用clearfix div 或clear div 以避免以下内容保留在这些div 的下方。
您可以在此处找到如何使用clearfix div的详细信息
@Leniel this method is good but you need to add width to all the floating div's. I would say make them equal width or assign fixed width. Something like
you may assign class names to each div rather than adding
inline style
, which is not a good practice.Be sure to use a clearfix div or clear div to avoid following content remains below these div's.
You can find details of how to use clearfix div here
display: table;
如果文本需要显示
就好像在同一行上
换句话说;如果每个
中的文本垂直对齐需要相同,则可以尝试使用有点争议的
table
样式来尝试现代复古复古风格:这证明了对于格式化 CSL 风格的 Pandoc中的引用,如下图:
引用编号
div
和引用数据div
现在显示在完全相同的高度。display: table;
If text needs to appear
as if on the same line
In other words; if the vertical alignment of text in each
<div>
needs to be identical, one can attempt a modern retro throwback to yesteryear with the somewhat controversialtable
styling:This proved to be quite useful to format CSL-styled citations in Pandoc, as shown below:
The citation number
div
and the citation datadiv
are now shown at the exact same height.