Html 文本对齐不工作（css）

我有以下html：

        <div class="chat-scroll height-full">
            <div class="width-full" style="text-align: left">
                <div class="bubble-left"></div>
            </div>
            <div class="width-full">
                <div class="bubble-right" style="text-align: right"></div>
            </div>
        </div>

问题是，正如您在屏幕截图中所看到的：框未对齐，1向左，第二个向右。

---

我做错了什么？

div

s不是文本。它们是元素。因此，它们不受

文本对齐的影响

要对齐
div
：


左：默认值，不执行任何操作
中间：
左边距：自动；右边距：自动

右：
margin左：自动
div
s不是文本。它们是元素。因此，它们不受
文本对齐的影响

要对齐
div
：


左：默认值，不执行任何操作
中间：
左边距：自动；右边距：自动

右：
margin左：自动
由于它们位于全宽容器内，因此可以浮动元素。如果要将文本对齐到某一侧，还需要适当地设置文本对齐

  .bubble-left {
    @extend .bubble;
    float: left;   }

  .bubble-right {
    @extend .bubble;
    float: right;   }

由于它们位于全宽容器内，因此可以浮动元素。如果要将文本对齐到某一侧，还需要适当地设置文本对齐

  .bubble-left {
    @extend .bubble;
    float: left;   }

  .bubble-right {
    @extend .bubble;
    float: right;   }

html文件：

<div class="chat-scroll height-full">
        <div class="width-full">
            <div class="bubble-left" style="text-align:left">left</div>
            <div class="bubble-right" style="text-align:right">right</div>
        </div>
    </div>

jsIDLE:
html文件：

<div class="chat-scroll height-full">
        <div class="width-full">
            <div class="bubble-left" style="text-align:left">left</div>
            <div class="bubble-right" style="text-align:right">right</div>
        </div>
    </div>

jsfiddle:
也许你知道为什么webkit可以正常工作？moz也是如此也许你知道为什么webkit对它有效吗？moz Right也一样不想使用浮点它打破了高点不想使用浮点它打破了高点