Question

我在另一个div里面有3个div。每个内部div应该正确对齐，适合内容，从一个新的线和＆amp;将它自己的内容包装到新行。我正在使用float / clear来实现这一点，就像下面的小提琴一样。我可以使用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的行为与文本类似，这意味着它们将保持在同一行，直到没有更多空格，然后分解为新行。

您可以按照建议使用浮动和清除，但您也可以在每个div之后添加<br/>以打破一行：

<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添加到容器中。

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

Answer 2

right位置用于定位relative或absolute个定位元素。

要完成正确的对齐，只需向父级添加text-align: right：demo。

您会注意到第一个和第二个div在同一条线上，可能不是您想要的。为了解决这个问题，您需要清除侧面，但是只能清除浮动物品。因此，我建议您使用自己的（第一个）解决方案。

[修改]
作为替代方案，您可以在父级上使用white-space: pre。然后，您需要删除所有不需要的空格：

<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>

.outer{ background-color:#f88; width:50%; text-align: right; white-space: pre; padding: 0; } .inner{ word-wrap:break-word; max-width: 100%; display:inline-block; white-space: normal; margin: 0; }

DEMO

Answer 3

您可能无法使用inline-block完成此操作。

尝试使用flexbox，您就可以实现THIS LAYOUT。

CSS：

.outer{
    background-color:#f88; 
    width:50%; 
    display:flex;
    flex-flow: column wrap;
    align-items: flex-end; 
}

.inner{
    word-wrap:break-word;
    max-width:100%;
    display:block; 
    margin-right: 0;

}

Answer 4

右：0;以及所有定位属性只应在声明定位时使用。

通过将显示设置为内联块，它将被格式化为内嵌级别框。您仍然需要使用float属性和clear属性。

http://jsfiddle.net/z6xuhLgL/4/

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

将div设置为父对齐内容和右对齐

4 个答案: