logo标签列表

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

csselementpositioncontainers
3

我非常新手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元素相对于其容器定位 但我还没能成功。
非常感谢您提供的任何帮助。希望我已经正确地解释了我的问题。
为什么你不能完成其他问题中提出的内容？它不起作用吗？而且，你为什么相信你所指的代码部分是正确的？你应该知道它，否则我们可能无法提供帮助。 - Felix Kling
2个回答
0
如果你想让.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;}
为了让事情更清晰一些...（顺便说一句，float:right并没有起作用）我试图修改我的Tumblr主题，因为现有的代码是由别人编写的。.shuffle { position: fixed; top: 35px; right: 3px; _position: static; _margin: 3px; _text-align: right; z-index: 1337; } .... <div class="shuffle"> <a href="/random"><img src="http://static.tumblr.com/dbcxhwx/padke8y7x/oy9npboai5k99ruwwrs7l61l_500.png"></a> </div> ----- 我只是想将“shuffle”按钮从浏览器的右侧移到#wrap的右侧。 - user353389
有没有其他想法或建议？ - user353389
如果.shuffle包含在.wrap中，而且您不关心文档的流程，将.shuffle定位到.wrap之外的最简单方法是设置.wrap {position:relative;}和.shuffle {position:absolute;right:-200px}（或者您想要移动.shuffle右侧的像素数）。除非实际看到您所说的内容和文档结构，否则我无法提供比这更好的建议。 - edl
我认为.shuffle不包含在.wrap中。您可以在这里准确地看到我所指的内容。www.top10jeeps.com您是否在浏览器右上角看到了shuffle？我想将其重新定位，使其位于中间框架的右边框旁边，该框架的x轴位置根据浏览器大小而变化。希望我的表述清晰明了。非常感谢您的帮助。 - user353389
0

针对现代CSS进行更新：

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

将容器设置为显示：flex;和flex-flow: row;或column;取决于您的方向。

Justify-content:space-around;将会使子项平均分隔，每两个子项之间的空间与第一个和最后一个子项之间的空间大致相同。如果您想让第一个和最后一个项目紧贴着容器，请改用justify-content:space-between;。

如果你正在沿列流动，请使用Align-items:flex-start;将为您提供左边距。如果您在横向流动，则可以在顶部边距上排列项目。 Align-items:center;将居中您的列或行。 Align-items:flex-end;将在右侧对齐列，如果您使用希伯来语或阿拉伯语等RTL语言进行编写，则这正是您想要的，或者将所有行项目放置在底线上。

如果您正在制作一个文本项目的水平菜单，则可以尝试align-items:baseline;并使所有类型都排在您使用的字体的实际基线上。

如果您要在两个维度上工作怎么办？

那就使用CSS-Grid吧！

Rachel Andrew是Smashing Magazine的编辑，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;
}

这段代码将在 .container 类中使 .wrap div 在左侧，.xyz 类在右侧，并在它们之间留下 20px 的边距。
根据您想要将 .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类现在都有20像素的左边距，而大容器、类比所有div的总和都要宽。

这是一种方法，自2007年我开始编写正确的标记以来，在构建静态站点和WordPress子主题（主要基于Genesis框架）方面一直奏效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接