How to position a element next to another an element of undefined position?

Question

我是 html/xml/css 的新手，我正在尽力自学。然而，我遇到了一个谷歌搜索无法解决的问题。

我想将小图像定位在相对于另一个元素的固定位置（？）

我相信这是我想要相对于第二个元素定位的元素的代码。

<style type="text/css">
 #wrap { 
    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 定位到“#wrap”的右侧

.xyz {
    position: ???;
    top: 200px;
    right: ???;
    _position: ???;
    _margin: ???;
    _text-align: right;
    z-index: 1337;
}

我对 SOF 的搜索让我相信我应该按照这个思路做一些事情 - 使用 CSS 相对于其容器定位 HTML 元素 - 但我做不到。

非常感谢您提供的任何帮助。希望我已经正确解释了我的问题。

Answer 1

如果你想要

.xyz

在

#wrap

内部，但在右侧，在你的

float:right;

元素上做一个

.xyz

将实现你想要的。

编辑： 尝试这样的事情：

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

然后明智的CSS：

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

Answer 2

为现代 CSS 更新：

如果您在一个维度上工作，例如手机视图（所有内容基本上都是垂直的）或导航栏（所有内容基本上都是水平的），请使用 Flexible Box 模块。

设置你的容器显示：flex；和弹性流：行；或专栏；取决于你的前进方向。

对齐内容：周围空间；将均匀地间隔子项目，第一个和最后一个项目周围的空间量与每两个项目之间的空间量大致相同。如果您希望第一个和最后一个项目与容器齐平，请使用 justify-content:space-between;相反。

对齐项目：flex-start；如果你沿着一列向下流动，会给你一个左边的边距。如果你在一行中流动，你会把你的项目排在上边距上。对齐项目：居中；将使您的列或行居中。对齐项目：flex-end；将在右侧排列一列，如果您使用希伯来语或阿拉伯语等 RTL 语言编写，或者将所有行项目放在底线上，这就是您想要的。

如果你正在制作文本项目的水平菜单，你可能想尝试 align-items:baseline;并让所有类型与您正在使用的字体的实际基线对齐。

如果你在二维空间工作怎么办？

然后使用 CSS-Grid！

Smashing Magazine 的编辑 Rachel Andrew 和 Jen Simmons，现在在 Apple，以前是 Mozilla 的开发倡导者，他们一起或分别发布了大量资源（然后我就我从他们那里学到的东西进行了几次 WordCamp 演讲。）

我无法告诉你，在将近 8 年前的这个旧答案中，我有多高兴将浮标丢弃到历史的垃圾箱中，除非我需要将字体包裹在一个形状周围。但这是另一天的话题......

------------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 类，它们之间有 20px 的边距，在 .container 类中。

根据您想要将 .xyz 放在 .wrap 旁边的断言，不确定您想要对您的#container ID 做什么。

如果您真的想将#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 类现在每个都有 20px 的左边距，大容器类比所有 div 的总和还要宽

自从我在 2007 年开始编写适当的标记以来，这是一种对我构建静态站点和 WordPress 子主题（主要基于 Genesis 框架）反复使用的方法。