html - 使 div 适合父级内的内容并右对齐

Question

我在另一个 div 中有 3 个 div。每个内部 div 都应该右对齐，适合 content ，从一个新行开始并将它自己的内容也包装到新行中。我正在使用 float/clear 来实现这一点，如下面的 fiddle 所示。除了 float，我可以使用 display:inline-block 和 right:0 来实现这一点吗？

<div class="outer">

    <div id="a" style="background-color:#8f8;" class="inner">
        AA
    </div>

    <div id="b" style="background-color:#88f;" class="inner">
        BBBBBBB
    </div>

    <div id="c" style="background-color:#888;" class="inner">
        CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
    </div>
</div>

CSS:

.outer{
    background-color:#f88; 
    width:50%;    
}

.inner{
    word-wrap:break-word;
    max-width:100%;
    float:right; 
    clear:both;
}

适用于float: http://jsfiddle.net/z6xuhLgL/3/

不适用于 display:inline-block: http://jsfiddle.net/z6xuhLgL/4/

Answer 1

设置display:inline-block时，您使 div 的行为类似于文本，这意味着它们将保持在同一行，直到没有更多空间，然后换行。

您可以按照建议使用 float 和 clear，但也可以只添加 <br/>在每个 div 之后换行:

<div class="outer">
    <div id="a" style="background-color:#8f8;" class="inner">
        AA
    </div><br/>

    <div id="b" style="background-color:#88f;" class="inner">
        BBBBBBB
    </div><br/>

    <div id="c" style="background-color:#888;" class="inner">
        CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
    </div><br/>
</div>

Fiddle

不要忘记添加 text-align:right到容器。

我相信这是最简单的解决方案。