html - 在包含浮动元素的行上,将元素放置在居中元素旁边

  显示原文与译文双语对照的内容

如何将 smiley ( yellow background ) 立即放置在中心单词 Peter ( 红色 background ) 中,这个例子是

时间: 原作者:

如果给 .nameposition: relative 属性,则可以为它声明一个伪元素,它绝对定位在。


.name:after {
 position: absolute;
 left: 100%;
 background: yellow;
 content: ': )';/* the space is non-braking */
}

http://jsbin.com/urodit/20/edit

原作者:

你应该能够像这样使用浮动: http://jsbin.com/urodit/26/

有一些浏览 3列布局可以能会帮助你找到想法,如果这不是你想要的。


.toggle-me {
background-color: green;
float:left;
} 

.name {
background-color: red;
float:left; 
width:40px;
margin:auto;
}

.description {
background-color: yellow;
width: 20px;
float:left;
}

.container-one{
 float:right;
 width:100%;

}

.favourite-food {
background-color: orange;
float:left;

}

原作者:

检查这个 http://jsbin.com/urodit/30/edit
添加 .container-one { text-align: center; }.name { display: inline-block; } 以使 NAME 居中。然后 .description { display: inline-block; } 让它在 NAME 之后。 也删除 .name { margin: auto; } 因为它不再是必需的。 并添加 .name { text-align: left; }

请注意 .name 之后和 .description 之前的HTML注释:


<div class="container-one">
 <div class="toggle-me">|Toggle|</div>
 <div class="name">Peter</div><!--
 --><div class="description">: )</div>
</div>

这是删除内联块元素之间的空白,这是由代码本身的换行和缩进引起的。 如果你不想删除空白,只需删除HTML注释即可。

这是个丑陋的解决方案。 这不是一个好的解决方案,因为你需要在右边浮动元素的width 。 还需要将位于中心元素右侧的元素放置在html中居中的元素之前。

如果有人能够发布更清晰的解决方案,我将接受这个答案而不是这个。

原作者:
...