css - CSS：使 float:right 和 float:left 同步？

Question

第一：请看这个小提琴：http: //jsfiddle.net/gamehelp16/77ssr/

所以，这些图像：

_{（来源：placekitten.com）}

使用float:right属性

和这张图片：

_{（来源：placekitten.com）}

使用该float:left;属性

如果您在小提琴中看到第三张图像（带有浮动：左图）不在第二张图像（大图）旁边

我的问题是：如何制作第三张图片在第二张图片的右侧。我需要纯 CSS 解决方案

谢谢

更新：

我想出了另一种方法来做到这一点。这是通过将第二个图像的浮动设置为左：D

Answer 1

您可以浮动大的并将小的设置为阻止显示。在 JSFiddle 上查看。

html

<img src="http://placekitten.com/200" id="left">
<img src="http://placekitten.com/100">
<img src="http://placekitten.com/100">

css

img:not(#left) {
  display: block;
}
#left {
  float: left;
}

要将它们作为一个单元移动，您可以像这样将它们设置在父容器元素中。

Answer 2

css 的浮动元素是相对于页面而不是实际元素的，我建议您制作 2​​ 个 div，并在这些 div 中定位 imgs，或者您可以简单地使用顶部或左侧元素。选择是你的。