座元件內聯塊

我有以下HTML：座元件內聯塊

<div id="wrapper"> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="block"></div> 
</div>

現在，內聯元件具有display: inline-block。我需要它垂直對齊它們。塊元素是display: block。

此給出以下結果（第1圖像）：

enter image description here

因爲我想要的粉色元素（塊）在右邊，如果我嘗試將它設置爲float: right，我得到的其他元素錯位放置在左側，在右側留下一個與塊元素寬度相對應的邊距。任何幫助？

來源

2012-10-22 pistacchio

什麼是您的CSS？你可能會[發表演示]（http://jsfiddle.net/），讓我們更容易幫助你（並複製你的問題）？ –

你應該將粉色塊包裹在div中，並將粉色塊設置爲float:right。

<div id="wrapper"> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="inline-block"></div> 
    <div class="wrapper-inner clearfix"> 
     <div class="block" style="float:right"></div> 
    </div> 
</div>

如果內容阿伯這種內包裝材料可以添加clearfix類 - 因爲浮動元素不給他們的父元素的高度：

.clearfix:after { 
     content:""; 
     display:table; 
     clear:both; 
    }

來源

2012-10-22 14:43:53 acme

HTML

<div id="wrapper"> 
    <div class="inline-block"></div><!-- remove the whitespace 
--><div class="inline-block"></div><!-- because inline-blocks 
--><div class="inline-block"></div><!-- dont fully collapse whitespace 
--><div class="block"></div> 
</div>

CSS

#wrapper { 
    text-align: right; /* moves inline-blocks to the right */ 
    position: relative; /* to give context for absolute positioning of .block */ 
} 

.inline-block { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: #f40; 
} 

.block { 
    display: block; 
    width: 30px; 
    height: 30px; 
    background: blue; 
    position: absolute; 
    right: 0; /* move the block to the far right of #wrapper */ 
}

例如：http://jsbin.com/etuxab/2/edit

來源

2012-10-22 14:59:27

座元件內聯塊

回答

相關問題