为什么最小化的聊天框正在飞行？

时间：2016-06-30 15:48:08

标签： html css

为什么最小化的聊天框正在飞行？

当您放大其中一个聊天框时，另一个将被带到与另一个相同的高度。我想将最小化的一个保持在底部：0; 

var ChatBoxMessage = Vue.extend({
  template: '#ChatBoxMessage',
  data: function() {
    return {
      id: 0,
      user: {},
      messages: [],
    };
  },
  methods: {

  },
});

var ChatBox = Vue.extend({
  template: '#ChatBox',
  data: function() {
    return {
      id: 0,
      title: "Default Title",

      minimized: true,
      closeable: false,
    };
  },
  components: {
    ChatBoxMessage
  }
});

new Vue({
  el: '#app',

  data: {
    chatBoxes: [],
  },

  methods: {

  },

  ready: function() {

  },

  components: {
    ChatBox,
  }

});
.curved-top {
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px; }

.ChatBoxContainer {
  position: absolute;
  right: 0;
  width: 100%;
  bottom: 0;
  overflow-x: scroll; }

.ChatBoxWidget {
  float: right;
  margin-right: 30px; }

.ChatBox {
  color: white;
  height: 300px;
  background: #d3d3d3;
  width: 300px; }

.ChatBox__TitleBar {
  height: 30px;
  background: #78a400; }

.ChatBox__TitleBar__Title {
  float: left;
  margin: 5px;
  text-align: center;
  width: 76%; }

.ChatBox__TitleBar__Title-90 {
  width: 86% !important; }

.ChatBox__TitleBar__Buttons {
  float: right; }

.ChatBox__TitleBar__Buttons__Button {
  float: right;
  width: 30px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

.ChatBoxMinimized {
  width: 200px; }

.ChatBoxMinimized__TitleBar {
  color: white;
  height: 30px;
  background: #78a400; }

.ChatBoxMinimized__Icon {
  float: left;
  padding: 5px;
  width: 30px;
  text-align: center;
  background-color: #6a9700;
  border-top-left-radius: 5px; }

.ChatBoxMinimized__Title {
  float: left;
  margin: 5px; }

.ChatBoxMinimized__Buttons {
  float: right; }

.ChatBoxMinimized__Buttons__Button {
  float: right;
  width: 29px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

/*# sourceMappingURL=app.css.map */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="app">
  <template id="ChatBox">
    <div class="ChatBoxWidget">
      <div class="ChatBox curved-top" v-show="!minimized">
        <div class="ChatBox__TitleBar curved-top">
          <div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
            {{ title }}
          </div>
          <div class="ChatBox__TitleBar__Buttons">
            <div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-minus"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="ChatBoxMinimized curved-top" v-show="minimized">
        <div class="ChatBoxMinimized__TitleBar curved-top">
          <div class="ChatBoxMinimized__Icon">
            <i class="fa fa-comments"></i>
          </div>
          <div class="ChatBoxMinimized__Title">
            {{ title }}
          </div>
          <div class="ChatBoxMinimized__Buttons">
            <div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-plus"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <template id="ChatBoxMessage">

  </template>

  <div class="ChatBoxContainer">
    <chat-box></chat-box>
    <chat-box></chat-box>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

我仅修改了.ChatBoxContainer css类。

var ChatBoxMessage = Vue.extend({
  template: '#ChatBoxMessage',
  data: function() {
    return {
      id: 0,
      user: {},
      messages: [],
    };
  },
  methods: {

  },
});

var ChatBox = Vue.extend({
  template: '#ChatBox',
  data: function() {
    return {
      id: 0,
      title: "Default Title",

      minimized: true,
      closeable: false,
    };
  },
  components: {
    ChatBoxMessage
  }
});

new Vue({
  el: '#app',

  data: {
    chatBoxes: [],
  },

  methods: {

  },

  ready: function() {

  },

  components: {
    ChatBox,
  }

});
.curved-top {
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px; }

.ChatBoxContainer {
    position: absolute;
    right: 0;
    bottom: 0;
    overflow-x: scroll;
    vertical-align: bottom;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}

.ChatBoxWidget {
  float: right;
  margin-right: 30px; }

.ChatBox {
  color: white;
  height: 300px;
  background: #d3d3d3;
  width: 300px; }

.ChatBox__TitleBar {
  height: 30px;
  background: #78a400; }

.ChatBox__TitleBar__Title {
  float: left;
  margin: 5px;
  text-align: center;
  width: 76%; }

.ChatBox__TitleBar__Title-90 {
  width: 86% !important; }

.ChatBox__TitleBar__Buttons {
  float: right; }

.ChatBox__TitleBar__Buttons__Button {
  float: right;
  width: 30px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

.ChatBoxMinimized {
  width: 200px; }

.ChatBoxMinimized__TitleBar {
  color: white;
  height: 30px;
  background: #78a400; }

.ChatBoxMinimized__Icon {
  float: left;
  padding: 5px;
  width: 30px;
  text-align: center;
  background-color: #6a9700;
  border-top-left-radius: 5px; }

.ChatBoxMinimized__Title {
  float: left;
  margin: 5px; }

.ChatBoxMinimized__Buttons {
  float: right; }

.ChatBoxMinimized__Buttons__Button {
  float: right;
  width: 29px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

/*# sourceMappingURL=app.css.map */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="app">
  <template id="ChatBox">
    <div class="ChatBoxWidget">
      <div class="ChatBox curved-top" v-show="!minimized">
        <div class="ChatBox__TitleBar curved-top">
          <div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
            {{ title }}
          </div>
          <div class="ChatBox__TitleBar__Buttons">
            <div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-minus"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="ChatBoxMinimized curved-top" v-show="minimized">
        <div class="ChatBoxMinimized__TitleBar curved-top">
          <div class="ChatBoxMinimized__Icon">
            <i class="fa fa-comments"></i>
          </div>
          <div class="ChatBoxMinimized__Title">
            {{ title }}
          </div>
          <div class="ChatBoxMinimized__Buttons">
            <div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-plus"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <template id="ChatBoxMessage">

  </template>

  <div class="ChatBoxContainer">
    <chat-box></chat-box>
    <chat-box></chat-box>
  </div>
</div>

答案 1 :(得分：1)

要实现这一目标，您需要在display: inline-block;上使用vertical-align: bottom;和.ChatBoxWidget，而不是当前的浮点数。然后将.ChatBoxContainer课程设为text-align: right;

<强> CSS 

.ChatBoxContainer {
  text-align: right;
}

.ChatBoxWidget {
  display: inline-block;
  vertical-align: bottom;
}

＆＃13;
＆＃13; 
var ChatBoxMessage = Vue.extend({
  template: '#ChatBoxMessage',
  data: function() {
    return {
      id: 0,
      user: {},
      messages: [],
    };
  },
  methods: {

  },
});

var ChatBox = Vue.extend({
  template: '#ChatBox',
  data: function() {
    return {
      id: 0,
      title: "Default Title",

      minimized: true,
      closeable: false,
    };
  },
  components: {
    ChatBoxMessage
  }
});

new Vue({
  el: '#app',

  data: {
    chatBoxes: [],
  },

  methods: {

  },

  ready: function() {

  },

  components: {
    ChatBox,
  }

});
＆＃13; 
.curved-top {
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px; }

.ChatBoxContainer {
  position: absolute;
  right: 0;
  width: 100%;
  bottom: 0;
  text-align: right;
  overflow-x: scroll; }

.ChatBoxWidget {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 30px; }

.ChatBox {
  color: white;
  height: 300px;
  background: #d3d3d3;
  width: 300px; }

.ChatBox__TitleBar {
  height: 30px;
  background: #78a400; }

.ChatBox__TitleBar__Title {
  float: left;
  margin: 5px;
  text-align: center;
  width: 76%; }

.ChatBox__TitleBar__Title-90 {
  width: 86% !important; }

.ChatBox__TitleBar__Buttons {
  float: right; }

.ChatBox__TitleBar__Buttons__Button {
  float: right;
  width: 30px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

.ChatBoxMinimized {
  width: 200px; }

.ChatBoxMinimized__TitleBar {
  color: white;
  height: 30px;
  background: #78a400; }

.ChatBoxMinimized__Icon {
  float: left;
  padding: 5px;
  width: 30px;
  text-align: center;
  background-color: #6a9700;
  border-top-left-radius: 5px; }

.ChatBoxMinimized__Title {
  float: left;
  margin: 5px; }

.ChatBoxMinimized__Buttons {
  float: right; }

.ChatBoxMinimized__Buttons__Button {
  float: right;
  width: 29px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="app">
  <template id="ChatBox">
    <div class="ChatBoxWidget">
      <div class="ChatBox curved-top" v-show="!minimized">
        <div class="ChatBox__TitleBar curved-top">
          <div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
            {{ title }}
          </div>
          <div class="ChatBox__TitleBar__Buttons">
            <div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-minus"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="ChatBoxMinimized curved-top" v-show="minimized">
        <div class="ChatBoxMinimized__TitleBar curved-top">
          <div class="ChatBoxMinimized__Icon">
            <i class="fa fa-comments"></i>
          </div>
          <div class="ChatBoxMinimized__Title">
            {{ title }}
          </div>
          <div class="ChatBoxMinimized__Buttons">
            <div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-plus"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <template id="ChatBoxMessage">

  </template>

  <div class="ChatBoxContainer">
    <chat-box></chat-box>
    <chat-box></chat-box>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题