0

ブートストラップを使用しています

どういうわけかそれはめちゃくちゃに見えます。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>：&lt;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>：&lt;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>：&lt;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>：&lt;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：&lt;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：&lt;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：&lt;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：&lt;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：&lt;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>
4

2 に答える 2

1

上のマージンを取り出し.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>：&lt;a href="/user/1">Person A</a><br />
    Hi
  </div>
</div>
于 2013-01-17T18:53:37.387 に答える
1

全幅要素 (.bubble) の隣に要素をフロートさせようとしています。これがうまくいく方法の1つです： 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;          
}
于 2013-01-17T19:03:23.850 に答える