【发布时间】：2015-05-04 21:31:18
【问题描述】：
几天来，我一直在尝试解决应该是简单的浮动/内联块 CSS 问题，以至于我将元素拟人化为混蛋。谜底如下：
我已将 3 个短代码全部放在我网站上的一个居中对齐的 <p> 标记中。它们如下：
- A = [shortcode_for_a_left_sidebar]
- B = [shortcode_for_a_figure]
- C = [shortcode_for_a_right_sidebar]
A为float: left，B（三个短代码的主要部分）设置为：
display: block;
margin: auto;
而C，这个可怜的家伙，是float: right。
我希望三个短代码依偎在一起：
ABC，都在同一行。
A 像往常一样合群，在 B 的左边距内浮动没有问题。另一方面，C 被推到下一行！它看起来像：
AB
C
C当然适合在B的右边距内，但不会并肩站立。而且我无法弄清楚为什么代码会以这种方式运行的任何原因。因为它们在同一行/包裹在同一个标签中，B的边距不应该自动调整以让C进入吗？
我梳理了一堆类似的案例，答案似乎总是实现我已经实现的。我怎样才能让这三个成为朋友？
///这里是pesky floating elements.的实时链接
【问题讨论】：
-
把
float: right放在其他前面 -
希望这可以为您解决问题。否则，我建议创建一个小提琴来证明这一点。您应避免包含指向演示问题的外部网站的链接。
-
@brewal 我在另一篇类似的帖子中尝试过这样做，它产生了完全相同的浮动问题，但被镜像了——现在，BC 彼此相邻浮动，A 被踢到下面的行。你有什么猜测吗？
-
谢谢@steveklein，我不经常发帖，所以我不知道——我会考虑创建一个小提琴。
-
当然，Nate 不用担心，并且非常有趣和清晰的帖子顺便说一句:)