Question

如何在this示例中的居中字smiley（红色背景）后立即放置Peter（黄色背景）？

Answer 1

如果你给.name position: relative属性，你可以为它声明一个伪元素，它是绝对定位的。

.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/

一些谷歌布局的谷歌搜索可能会帮助你找到想法，如果这不是你想要的。

.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

检查此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; }。

请注意.name之后和.description之前的HTML评论：

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

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

Answer 4

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

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

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

4 个答案: