两个元素拒绝浮动在第三个旁边

Question

我一直试图解决几天内应该是一个简单的浮点/内联块CSS问题，直到我将这些元素拟人化为混蛋。难题如下：

我在我的网站上的中心对齐<p>标记中放置了3个短代码。它们如下：

• 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.

的实时链接

Answer 1

为了使一个元素向右浮动＆＃34;肩并肩＃34;，你必须把它放在HTML中没有浮动的内容之前：

<div id="my-float-left"></div>
<div id="my-float-right"></div>
<div id="my-not-floating-content"></div>

在您的情况下，您必须将.otw-sidebar-2 div置于<figure>之上。