html - inline-block 之后的块元素

Question

我有以下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，则会将其他元素错放在左侧，从而在右侧留下与块元素宽度相对应的边距。有什么帮助吗？

Answer 1

您应该将粉红色块包裹在 a 中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>

如果有内容 aber 这个内部包装你可以添加一个 clearfix 类 - 因为浮动元素不会给它们的父元素一个高度：

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

Answer 2

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