Question

我是html / xml / css的新手，我正在尽力自学。但是，我遇到了Google搜索无法解决的问题。

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

我相信这是我想要将第二个元素相对于。

定位的元素的代码

<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的搜索让我相信我应该按照这个方针做点什么 - Position an HTML element relative to its container using CSS - 但我无法做到。

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

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

我首选的方法是将我想要的所有元素放在一个容器中，然后将剩下的所有东西都浮起来。所以我要添加一个容器类（我不是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类中。

根据您想要在.wrap旁边放置.xyz的断言，不确定您要对#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框架）而反复工作的方法。

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

2 个答案: