html - 同じ行（配置）にオブジェクトを設定するにはどうすればよいですか？

Question

私はそれを話した泡とアイコンを持っています。
ご覧のとおり、このアイコンは次の新しい行に表示されます。
それらを同じ行にまとめるにはどうすればよいですか？Aさんは眼鏡をかけた男、Bさんはつぶやき鳥です。

cssを修正するにはどうすればよいですか？

HTML

<span id="chat">
  <span id="comment_645">
        <div class="me_icon">
          <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" 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">
    18:03:02：&lt;a href="/user/1">Person A</a><br />
    hi
        </div>
    </span>
  <span id="comment_644">
        <div class="me_icon">
            <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" 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">
            17:54:43：&lt;a href="/user/1">Person A</a><br />
    hey
        </div>
    </span>
    <span id="comment_643">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
            17:54:00：&lt;a href="/user/1">Person A</a><br />
            woohoo
        </div>
    </span>
  <span id="comment_642">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
            21:15:25：&lt;a href="/user/1">Person A</a><br />
            ok
        </div>
    </span>
    <span id="comment_641">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
            20:47:34：&lt;a href="/user/1">Person A</a><br />
            Howdy
      </div>
    </span>
    <span id="comment_638">
        <div class="bubble you">
            20:36:49：&lt;a href="/user/2">Person B</a><br />
            hello
        </div>
        <div class="you_icon">
            <p class="responsive-img">
                <a href="/user/2"><img alt="2011-08-16_20.01.51" 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>
    </span>
    <span id="comment_634">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
            13:48:48：&lt;a href="/user/1">Person A</a><br />
            How's this?
        </div>
    </span>
    <span id="comment_633">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
          13:48:29：&lt;a href="/user/1">Person A</a><br />
          test
        </div>
    </span>
    <span id="comment_631">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
            13:25:55：&lt;a href="/user/1">Person A</a><br />
            hello
        </div>
    </span>
    <span id="comment_630">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" 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">
            13:00:33：&lt;a href="/user/1">Person A</a><br />
            Nice to know you
        </div>
    </span>
</span>

CSS

.chat {
    width: 100%;
    text-align: center;
    display:inline-block;

}

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;

}

.me {
    float: center;   
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: left;   
}

.me_icon {
    float: left;   
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: left;    
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {
    float: center;    
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: left;          
}

.you_icon {
    float: right;    
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: right;          
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;   
}

欲しい出力

       ____________________
IconA < 20:47:34: Person A |
       | Howdy             |
       |___________________|
        ____________________ 
       | 20:36:49: Person B |
       | hello ?             > IconB
       |____________________|

このようではありません

       ____________________
IconA < 20:47:34: Person A |
       | Howdy             |
       |___________________|
 ____________________ 
| 20:36:49: Person B |
| hello ?             > IconB
|____________________|

score 1 · Accepted Answer

これを完全に実現するには、html構造も変更する必要があります。パーセンテージサイズを使用することはお勧めできません。

こちらのデモをご覧ください

HTML

<div id="chat">
 <div id="comment_641">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" 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">
            20:47:34：&lt;a href="/user/1">Person A</a><br />
            Howdy
            </div>
    </div>
 <div id="comment_638">
   <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="2011-08-16_20.01.51" 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">
               20:36:49：&lt;a href="/user/2">Person B</a><br />
            hello
            </div>

    </div>
</div>

CSS

.chat {幅：100％; text-align：center; display：inline-block;

}    
.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
  margin-left:89px;
  margin-right:89px;
  margin-top:10px;
  margin-bottom:10px;
}    
.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;

}
.me {
    float: center;   
    text-align: left;   
}    
.me_icon {
    float: left;   
    margin: 5px 10px 5px 5px;
    text-align: left;    
}    
.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}    
.you {
    float: center;    
    text-align: left;          
}
.you_icon {
    float: right;    
    margin: 5px 10px 5px 5px;
    text-align: right;          
}   
.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;   
}

score 1 · Accepted Answer

これがあなたの望むものかどうかはわかりませんが、あなたの幅が私とあなたのアイコンでは大きすぎるので、40%代わりに幅を変更してそれらを小さくし、バブルクラスに85%追加しました：clear:both

http://jsfiddle.net/4Tyey/1/

score 1 · Accepted Answer

アイコンの幅が広すぎるため、float:center存在しません。

私はこれがあなたが探しているものだと信じています：

http://jsfiddle.net/4Tyey/2/

html - 同じ行（配置）にオブジェクトを設定するにはどうすればよいですか？

3 に答える 3

Related

Reference