左右對齊消息氣泡

我想要做的是將每個消息氣泡對齊到一邊，所以第一個消息氣泡會在左邊，第二個在右邊。目前，您可能在小提琴中看到的問題是，如果信息太短，它會顯示在同一行上。左右對齊消息氣泡

請展開「結果」窗口，以便看到fiddle

問題下面的代碼也：

HTML：

<section id="chat-box" class="clearfix"> 
    <ul class="messages clearfix"> 
     <li>hefajgf jajgahg jahgjahgjahgj ahgjahgjaghajhg</li> 
     <li>hefajgfagkjhajhgajhgajsghjasghajagkjagjka eieajgieagjaeigjaei jeagi</span></li> 
     <li>hello</li> 
     <li>hello</li> 
    </ul> 
</section>

CSS：

body { 
    background: #e6e7e9; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
* html .clearfix { 
    height: 1%; 
} 
.clearfix { 
    display: block; 
} 
section#chat-box { 
    background: #fff; 
    padding: 10px; 
    height: ; 
    margin: 0 auto; 
    max-width: 600px 
} 

ul.messages { 
    padding: 10px; 
    list-style-type: none; 
} 

ul.messages li { 
    display: block; 
    position: relative; 
    float: left; 
    min-width: 250px; 
    background: #a6acba; 
    border: 4px solid transparent; 
    border-radius: 4px; 
    padding: 5px; 
    color: #fff; 
    font-weight: 700; 
    margin-bottom: 15px; 
} 

ul.messages li:after, ul.messages li:before { 
    right: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

ul.messages li:after { 
    border-color: rgba(166, 172, 186, 0); 
    border-right-color: #a6acba; 
    border-width: 12px; 
    margin-top: -16px; 
} 
ul.messages li:before { 
    border-color: rgba(0, 0, 0, 0); 
    border-right-color: transparent; 
    border-width: 26px; 
    margin-top: -26px; 
} 

ul.messages li:nth-child(2n) { 
    background: #76a0be; 
    float: right; 
} 

ul.messages li:nth-child(2n):after, ul.messages li:nth-child(2n):before { 
    border-right-color: transparent; 
    left: 100%; 
} 

ul.messages li:nth-child(2n):after { 
    border-left-color: #76a0be; 
} 
ul.messages li:nth-child(2n):before { 
    border-left-color: transparent; 
}

來源

2015-10-24 poseidon23

您缺少clear的兩邊都有0個元素。

嘗試添加此CSS規則：

li{ 
    display: block; 
    clear: both; 
}

你可以將這些規則上更合適的地方，我做了這樣只是爲了告訴你什麼是你失蹤。

請參閱fiddle

來源

2015-10-24 19:22:24 Chris

左右對齊消息氣泡

回答

相關問題