如果您希望.xyz位于#wrap的内部但在右侧，则在.xyz元素上执行float:right;将达到您的目的。
编辑：试试这样：

<div class="wrap">
     <div class="shuffle"><my shuffle img></div>
     ......Other stuff......
</div>

然后按CSS方式：

.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}

针对现代CSS进行了更新：
如果你在一维空间工作，比如手机视图（所有东西基本上都是垂直的）或导航栏（所有东西基本上都是水平的），那么就使用Flexible Box模块。
将容器设置为显示：柔性;和柔性流动：行;或列;这取决于你的方向。
对齐内容：周围空白;将均匀地分隔子项，第一项和最后一项周围的间距与两项之间的间距大致相同。如果希望第一项和最后一项与容器对齐，请使用justify-content：space-between;而不是。
对齐项目：灵活启动;如果您向下流动到一列，将为您提供左边距。如果您向下流动到一行，将使您的项目在上边距上对齐。Align-items：center;将使列或行居中。Align-items：flex-end;将在右侧对齐一列，如果您使用RTL语言（如希伯来语或阿拉伯语）编写，或者将所有行项目都放在最后一行，那么这就是您想要的。
如果你正在制作一个文本项的水平菜单，你可能想尝试align-items：baseline;然后把所有的字体都排在你使用的字体的基线上。
如果你在二维空间里工作呢？
然后使用CSS网格！
《粉碎》杂志的编辑雷切尔·安德鲁和珍·西蒙斯（Jen Simmons）现在在苹果公司工作，以前是Mozilla的开发者倡导者，他们一起或分别发布了大量的资源（然后我在WordCamp做了几次演讲，讲述我从他们那里学到的东西）。
我无法告诉你我有多高兴抛弃彩车，这是近八年前的老答案，扔到历史的垃圾箱里，除非我需要把字体包裹在一个形状上。但这是另一天的主题...
-------------2013年的答复--------
大多数情况下，我喜欢的方法是将所有需要的元素放在一个容器中，然后将所有元素浮动到左边。因此，我将向样式添加一个容器类（我不太喜欢ID，它们的限制性很强），并进行一些编辑：

.container  {
  float: left;
  width: 800px;
 }

#wrap { 
  float: left;
  width:550px; 
  background-color:#fff; 
  margin:0 auto; 
  padding:0; 
  border-right:1px solid #ccc;         
  border-left:1px solid #ccc; 
}

#container {
      width: 500px;
      margin:0 auto;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
}
.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

这段代码将在左侧给予.wrap div，在右侧提供.xyz类，在.container类中，它们之间有20 px的边距。
不确定要如何处理#container ID，因为您Assert要将.xyz放在. wrap旁边。
如果你真的想把#container和其他元素放在同一行，也可以把它向左浮动：

.container  {
    float: left;
    overflow: auto;
    width: 1330px;
}

 #container {
      float: left;
      width: 500px;
      margin:0 0 0 20px;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
 }

.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

容器ID和xyz类现在都有20 px的左边距，而大容器class比所有div之和还要宽。
自从我在2007年开始编写合适的标记以来，我一直在使用这种方法来构建静态站点和WordPress子主题（大多数基于Genesis框架）。