Question

我试图显示一个浮动气泡，并在气泡的左侧放置一条消息，我这样做是使用绝对定位并为left属性设置了一个固定值。但是，当消息文本更改时，div宽度会减小/扩展，并且会远离气泡。

我应该如何定位它，以使浮动消息无论文本在哪儿都停留在气泡的左侧？

代码如下：

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There , chat with us!", "Hello There ", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});

body {
  font-family: calibri;
  background-color: lightgray;
}
#floating-bubble {
    background-color: teal;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
  background: #3a96dd;
    padding: 5px;
    left: -180px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    border-radius: 10px;
    top: 10px;
    font-size: 14px;
    box-shadow: 0 0 10px #000;
    position: absolute;
    color: #fff;
    font-family: Calibri, sans-serif;
}

<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There , chat with us!</div>
</div>

Fiddle

Answer 1

这很简单，请使用此

：

对于#floating-message，请使用right: 60px（ 60px，因为50px正在使用#floating-bubble ）并删除{{ 1}}样式，以便消息会停留在屏幕的最后，但是现在有时会变成两行，因此请使用left进行修复。

此外，我认为在white-space: nowrap中将2147483645用于z-index是多余的，我已将其更改为#floating-bubble，以防万一其他元素具有{{ 1}}。

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There , chat with us!", "Hello There ", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});

Answer 2

您可以像使用position: absolute;一样使用#floating-message并为其提供所需的position: fixed;和right，而不用bottom用于#floating-bubble < / p>

这里是一个例子：

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There , chat with us!", "Hello There ", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});

body {
  font-family: calibri;
  background-color: lightgray;
}
#floating-bubble {
    background-color: teal;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
    background: #3a96dd;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 30px;
    margin-right: 80px;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
    padding: 5px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    font-size: 14px;
    color: #fff;
    font-family: Calibri, sans-serif;
}

<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There , chat with us!</div>
</div>

Answer 3

我建议您将两个元素都包装在一个容器中，并固定该容器，然后可以更轻松地将容器中的元素对齐，并且行为更加可预测。

结果是：https://jsfiddle.net/vrnyt7ou/

<button id="toggleMessage">
    Toggle Message
</button>
<div class="float-container">
  <div id="floating-message">Hello There , chat with us!</div>
  <div id="floating-bubble"></div>
</div>

.float-container {
  display: flex;
  position: fixed;
  bottom: 0;
  right: 0;
}
#floating-bubble {
    background-color: teal;
    margin-bottom: 20px;
    margin-right: 60px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: box-shadow .5s ease-in-out;
    cursor: pointer;
    z-index: 2147483645;
    border-bottom-right-radius: 0;
    background-image: url('https://cdn0.iconfinder.com/data/icons/thin-communication-messaging/57/thin-036_bubble_comment_chat_message-512.png');
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    border-bottom-right-radius: 0;
}
#floating-message {
  margin-right: 15px;
  background: #3a96dd;
    padding: 5px;
    transition: none;
    animation-duration: .5s;
    animation-name: slidein,wiggle;
    animation-iteration-count: 1,4;
    animation-direction: normal,alternate;
    animation-timing-function: ease-in,ease-in-out;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 0 10px #000;
    color: #fff;
    font-family: Calibri, sans-serif;
}

Answer 4

只需将login(cpf: "data").subscribe(onNext: { _ in // Success }, onError: { _ in // Failure }).disposed(by: disposeBag)类中的public class MyService extends Service { public MyService() { } public int onStartCommand(Intent intent, int flags, int startId) { // Toast.makeText(this, "service starting", Toast.LENGTH_SHORT).show(); // For each start request, send a message to start a job and deliver the // start ID so we know which request we're stopping when we finish the job startService(new Intent(getApplicationContext(), FirebaseMessagingService.class)); // If we get killed, after returning from here, restart return START_STICKY; } @Override public IBinder onBind(Intent intent) { // TODO: Return the communication channel to the service. throw new UnsupportedOperationException("Not yet implemented"); } }更改为left: -180px。这将迫使包含消息的div增长到左侧。

right: 55px

#floating-message

var floatingMessage = document.querySelector("#floating-message");
var toggleBtn = document.querySelector("#toggleMessage");
var messages = ["Hello There , chat with us!", "Hello There ", "Welcome!", "blah blah", "looooooooooooooooooooonoooooooooooooog text"];
var currentIndex = 0;
toggleBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % messages.length;
    floatingMessage.textContent = messages[currentIndex];
});

如何将div的末尾放置在容器的左侧

Fiddle

4 个答案: