使用引导程序时如何解决与 CSS 的对齐问题？

Question

我正在使用引导程序

不知何故，它看起来一团糟。 似乎 twitter-bootstrap 正在阻止。
我怎样才能解决这个问题？请查看我的演示。

演示 http://jsfiddle.net/5r6UM/4/

HTML

<span id="chat">






    <span id="comment_652">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:15:02</span>：<a href="/user/2">Person B</a><br />
            What
            </div>
        </div>
    </span>




    <span id="comment_651">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:14:51</span>：<a href="/user/2">Person B</a><br />
            Hi there
            </div>
        </div>
    </span>




    <span id="comment_650">
        <div class="bubble_row">
            <div class="bubble you"><span class='text-error'>02:12:53</span>：<a href="/user/1">Person A</a><br />
            Hi

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_649">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:11:46</span>：<a href="/user/2">Person B</a><br />
            Wow
            </div>
        </div>
    </span>




    <span id="comment_645">
        <div class="bubble_row">
            <div class="bubble you">18:03:02：<a href="/user/1">Person A</a><br />
            Hello

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_644">
        <div class="bubble_row">
            <div class="bubble you">17:54:43：<a href="/user/1">Person A</a><br />
            Howdy

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_643">
        <div class="bubble_row">
            <div class="bubble you">17:54:00：<a href="/user/1">Person A</a><br />
            Yahoo

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_642">
        <div class="bubble_row">
            <div class="bubble you">21:15:25：<a href="/user/1">Person A</a><br />
            OK

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>




    <span id="comment_641">
        <div class="bubble_row">
            <div class="bubble you">20:47:34：<a href="/user/1">Person A</a><br />
            Hi

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
        </div>
    </span>











</span>

Answer 1

您正在尝试将一个元素浮动到一个全宽元素 (.bubble) 旁边。 这是一种应该有效的方法： http://jsfiddle.net/5r6UM/9/

主要区别：

.bubble_row {
  position: relative;
}

.me_icon {
    position: absolute;
    left: 0;
    top: 0;
    margin: 5px 10px 5px 5px;
    text-align: left;    
}

.you_icon {
    position: absolute;
    right: 0;
    top: 0;
    margin: 5px 10px 5px 5px;
    text-align: right;          
}

Answer 2

去掉.me_icon和.you_icon的边距

.me_icon {
    float: left;
    /*margin: 5px 10px 5px 5px;*/
    text-align: left;
}

特别是顶部和底部边距。

“你的图标”显示在它们所属的消息下方。这是因为当您正确浮动某些内容并希望其他元素位于同一行时，浮动元素必须位于标记中的其他元素之前。只需交换他们的订单：

<div class="bubble_row">
  <div class="you_icon">
    <p class="responsive-img">  
      <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
    </p>
  </div>
  <div class="bubble you"><span class='text-error'>02:12:53</span>：<a href="/user/1">Person A</a><br />
    Hi
  </div>
</div>