如何将一个元素定位到另一个未定义位置的元素旁边？

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 内部但在右侧，请在 .xyz< 上执行 float:right; /code> 元素将实现你想要的。

编辑：
尝试这样的事情：

<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 进行了更新：

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

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

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

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

如果您正在制作文本项的水平菜单，您可能需要尝试align-items:baseline;并将所有类型排列在您正在使用的字体的实际基线上。

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

那么就使用 CSS-Grid 吧！

Smashing 杂志的编辑 Rachel Andrew 和 Jen Simmons（现在在 Apple 工作，曾是 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 和左侧的 .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 框架）有效。