在inline-block之后的Block元素
在inline-block之后的Block元素
提问于 2012-10-22 22:40:01
我有以下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。
这将产生以下结果(第一张图像)：
由于我希望粉色元素(块)位于右侧，因此如果尝试将其设置为float: right，则其他元素会错误地放在左侧，从而在右侧留下与块元素的宽度相对应的边距。有什么帮助吗？
回答 2
Stack Overflow用户
发布于 2012-10-22 22:43:53
您应该将粉色块包装在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;
}Stack Overflow用户
发布于 2012-10-22 22:59:28
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13013807
复制相关文章
相似问题
腾讯云开发者
