將元素放在包含浮動元素的行的居中元素的旁邊

如何在this示例中將居中詞Peter（紅色背景）後的smiley（黃色背景）緊跟在後面？將元素放在包含浮動元素的行的居中元素的旁邊

2013-01-02 Bentley4

如果你給.nameposition: relative屬性，你可以聲明一個僞元素，它是絕對定位的。

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

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

來源

2013-01-02 17:20:30 lulezi

我將無法使用它，因爲對於真實情況，我使用的是一個圖像而不是'：）'，所以我不能將它放在內容中（我的錯是爲了指明問題）。但是，我不會很喜歡這個，因爲內容最好保存在html中，它不允許你在它的右邊放置多個元素。 – Bentley4

您可以將圖像顯示爲背景圖像。但你說得對：HTML是內容更好的選擇。但是，如果你想分享一些關於你的項目的更多信息（固定或可變寬度的圖像等），也許我可以幫助你。 – lulezi

你應該能夠與這樣的花車做到這一點：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; 

}

來源

2013-01-02 17:25:26

入住這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>

這是爲了去掉inline-block的元素，造成線路中斷和代碼自身的縮進之間的空白。如果您不想刪除空白區域，只需刪除HTML註釋。

來源

2013-01-02 19:27:55

'彼得'雖然沒有居中，但與原來相比。 – Bentley4

這樣好嗎？ http://jsbin.com/urodit/58/edit –

This是一個醜陋的解決方案。這不是一個很好的解決方案，因爲你需要擺弄漂浮在右邊的元素的width。您還需要將位於中心元素之前的元素置於居中元素之前。

如果任何人能夠發佈更清潔的解決方案，我會接受這個答案，而不是這個。

來源

2013-01-03 20:46:11 Bentley4

將元素放在包含浮動元素的行的居中元素的旁邊

回答

相關問題