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

Question

在此示例中，如何将smiley（黄色背景）紧跟在居中的单词Peter（红色背景）之后？

Answer 1

If you give .name the position: relative property, you can declare a pseudo-element for it, which is absolutely positioned.

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

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

Answer 2

你应该可以用这样的浮点数来做到这一点：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;

}

Answer 3

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

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

Answer 4

检查此http://jsbin.com/urodit/30/edit
已 添加.container-one { text-align: center; }并将.name { display: inline-block; }名称居中。然后.description { display: inline-block; }让它跟在名字后面。也被删除.name { margin: auto; }，因为它不再需要。并补充道.name { text-align: left; }。请注意之前和之后

的 HTML 注释：.name.description

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

这是为了去除由代码本身的换行和缩进引起的行内块元素之间的空白。如果您不想删除空格，只需删除 HTML 注释。