我正在建立一个聊天客户端，如果消息是来自活动用户，则要float-right，然后是float-left，如果是从另一个最终用户收到消息，则要float:right。我尝试在CSS本身中添加if (user.id === msgsender.id) {
$("#messages").append($("<div class= bubble-r><li>/div>").text(msg));
} else {
$("#messages").append($("<div class=bubble><li></div>").text(msg));
}
function render() {
return (
<div>
<ul id="messages">
<div />
</ul>
</div>
);
}
，但是这样做时，列表项变为水平而不是垂直。
JavaScript
.bubble-r {
overflow-x: hidden;
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble {
overflow-x: hidden;
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
ul {
padding: 0px;
margin: 4px;
}
CSS
def _findRow(self, entry):
''' Return row index for row which contains "entry". '''
for i in range(10):
try:
cell = self.worksheet.find(email)
return cell.row
except gspread.exceptions.CellNotFound:
return None
except gspread.exceptions.APIError:
# This occurs when we get a timeout of the authentication token
# Need to reauthenticate
self._open_sheet()
continue
print('Leadsheet:find:: Failed to renew authorization after 10 attempts.')
return None
答案 0 :(得分：3)
那是因为您需要为每个气泡文本在块级别上包装一个包装。基本方法是插入一个li，如果消息是来自发件人的，则里面有一个div.bubble浮动。
添加的内容如下：
function addMessage(user, msg) {
var $li = $("<li></li>");
var $div = $("<div/>")
.addClass("bubble")
.text(msg)
.toggleClass("bubble-sender", user.id === msgsender.id) //If sender, it will add "bubble-sender" class
.appendTo($li);
$li.appendTo("#messages");
}
然后，您仅使.bubble-sender类向右浮动。
在这里摆弄代码 https://jsfiddle.net/Robertroid/Lxd78ayf/29/
还修复了一些问题，例如多余的CSS（两个气泡都有一个.bubble类，用于共享样式），将ul更改为ol（这是有道理的，因为聊天文本是按到达顺序排序的），而li是ol的直接子代。
希望有帮助
答案 1 :(得分：2)
您的主要问题是您没有使用clear来清除浮点数。这就是为什么它都是水平的。
现在让我们整理一下并使它更有意义。
元素可以有多个类，并用空格分隔。为bubble设置一个通用类，然后为sender和receiver设置一个类
这会给你类似的东西
//Div is an invalid child of ul, use li
var userClass = user.id === msgsender.id ? "sender" :"receiver";
$("#messages").append($("<li class='bubbble'>").addClass(userClass).text(msg));
//Got rid of div from the below, it is invalid html
function render() {
return (
<div>
<ul id="messages">
</ul>
</div>
);
}
CSS
.bubble {
overflow-x: hidden;
position: relative;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
//Need to clear floats to get each
//Message on a new line.
clear:both;
}
.sender {
background: #cad5d7;
float:left;
}
.receiver {
background: #0072c6;
float:right;
}
ul {
padding: 0px;
margin: 4px;
}
何时渲染应该给您：
.bubble {
overflow-x: hidden;
position: relative;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
margin-bottom:2px;
}
.sender {
background: #cad5d7;
float:left;
clear:both;
}
.receiver {
background: #0072c6;
float:right;
clear:both;
color:#FFF;
}
ul {
padding: 0px;
margin: 4px;
}<ul id="messages">
<li class="bubble sender">Hi from sender</li>
<li class="bubble receiver">Hi from reciever</li>
<li class="bubble sender">Whats up?</li>
<li class="bubble sender">Having a good day?</li>
<li class="bubble receiver">Not much. Just answering questions on SO</li>
</ul>
答案 2 :(得分：1)
好吧，您根本不需要使用object TcpServerBindTls extends StrictLogging {
def apply(hostInterface: String, tcpPort: Int, handler: Flow[ByteString, ByteString, NotUsed])(implicit system: ActorSystem, materializer: ActorMaterializer) = {
val sslContext = buildSSLContext
val firstSession = prepareFirstSession(sslContext)
val connections: Source[Tcp.IncomingConnection, Future[Tcp.ServerBinding]] = Tcp().bindTls(hostInterface, tcpPort, sslContext, firstSession)
connections runForeach { connection =>
logger.info(s"New connection: ${connection}")
connection.handleWith(handler)
}
}
def prepareFirstSession(sslContext: SSLContext)(implicit system: ActorSystem) = {
val sslConfig = AkkaSSLConfig.get(system);
val config = sslConfig.config;
val defaultParams = sslContext.getDefaultSSLParameters();
val defaultProtocols = defaultParams.getProtocols();
val defaultCiphers = defaultParams.getCipherSuites();
val clientAuth = TLSClientAuth.need
defaultParams.setProtocols(defaultProtocols)
defaultParams.setCipherSuites(defaultCiphers)
val firstSession = new TLSProtocol.NegotiateNewSession(None, None, None, None)
.withCipherSuites(defaultCiphers: _*)
.withProtocols(defaultProtocols: _*)
.withParameters(defaultParams)
firstSession
}
def buildSSLContext: SSLContext = {
val bufferedSource = io.Source.fromFile("/path/to/password/file")
val keyStorePassword = bufferedSource.getLines.mkString
bufferedSource.close
val keyStore = KeyStore.getInstance("PKCS12");
val keyStoreLocation = "/path/to/keystore/file/server.p12"
val keyStoreFIS = new FileInputStream(keyStoreLocation)
keyStore.load(keyStoreFIS, keyStorePassword.toCharArray())
val trustStore = KeyStore.getInstance("PKCS12");
val trustStoreLocation = settings.tls.keyStoreLocation;
val trustStoreFIS = new FileInputStream(keyStoreLocation)
trustStore.load(trustStoreFIS, keyStorePassword.toCharArray())
val kmf = KeyManagerFactory.getInstance("SunX509")
kmf.init(keyStore, keyStorePassword.toCharArray())
val tmf = TrustManagerFactory.getInstance("SunX509")
tmf.init(trustStore)
val sslContext = SSLContext.getInstance("TLS")
sslContext.init(kmf.getKeyManagers, tmf.getTrustManagers, new SecureRandom())
sslContext
}
}
！这是您的工作：
float然后将其添加到您的CSS中：
if (user.id === msgsender.id) {
$("#messages").append($('<div class="bubble-r"><li>/div>').text(msg));
//I assume bubble-r means you want this bubble on the right
} else {
$("#messages").append($('<div class="bubble"><li></div>').text(msg));
}
function render() {
return (
<div>
<ul id="messages">
</ul>
</div>
);
}
这将导致不存在适当的页边距，因此将使它们附着在屏幕的这一侧。