几天来，我一直在尝试解决一个简单的 float /内联 block CSS 问题，以至于我将这些元素拟人化为 SCSS 。难题如下:
我将 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 的左边距内 float 没有问题。另一方面，C 被推到下面的行!看起来像:
AB
C
C 当然适合 B 的右边距，但不会肩并肩。而且我无法找出代码为何以这种方式运行的任何原因。因为它们在同一行/包含在同一标签中，B 的边距是否应该自动调整以让 C 进入？
我梳理了一堆类似的案例，答案似乎总是要实现我已经实现的东西。我怎样才能让这三个人成为 friend ？
///这是pesky floating elements.的实时链接
最佳答案
为了使元素“并肩” float ，您必须将其放在 HTML 中未 float 的内容之前:
<div id="my-float-left"></div>
<div id="my-float-right"></div>
<div id="my-not-floating-content"></div>
在您的情况下，您必须将 .otw-sidebar-2 <figure> 上方的 div .
关于html - 两个元素拒绝漂浮在第三个元素旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30040342/