内联块后的块元素

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

你应该在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;
    }

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