代码之家 › 专栏 › 技术社区 › cyberpirate92

如何将DIV的末端定位到容器的左侧

css html

cyberpirate92 · 技术社区 · 6 年前

我试图显示一个浮动气泡,其中一条消息位于气泡的左侧,我使用绝对定位并为 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

4 回复 | 直到 6 年前

letsintegreat israelss 6 年前

很简单,用这个:

为了 #floating-message 使用 right: 60px ( 60px 因为 50px 正在被使用 #floating-bubble )并移除 left 样式,这样消息将一直显示在屏幕的末尾,但现在它有时分为两行,以便修复这种使用 white-space: nowrap .

另外,我认为使用 2147483645 对于 z-index 在里面 #浮动气泡 是多余的,我把它改成了 2 以防其他元素 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];
});

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: 2;
    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;
    right: 60px;    /* Added right over here, so that message stick to the end of screen */
    white-space: nowrap; /* Added this over here, so that it forces the message to be in single line */
    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>

Partho63 BASANT KUMAR 6 年前

而不是使用 position: absolute; 对于 #floating-message 你可以使用 position: fixed; 给你想要的 right 和 bottom 就像你在 #floating-bubble

下面是一个例子:

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>

Gêdhean Alves Vieira 6 年前

只是改变 left: -180px 到 right: 55px 在里面 #floating-message 班级。这将强制包含消息的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;
    right: 55px;
    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>

Michael Christopher Martire 6 年前

我建议您将两个元素都包装在一个容器中,并使该容器固定,然后您可以更容易地将容器中的元素对齐,并且它具有更可预测的行为。

结果如下: 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;
}