Question

我有一个基本的聊天网站。中间的聊天框，用户在发送消息时按Enter。右侧有一个ajax填充的当前登录用户列表。

.chat {
  margin-top: 10px;
}

.chat .messages {
  background-color: white;
  border: 1px solid #ccc;
  width: 300px;
  height: 250px;
  padding: 10px;
  resize: both;
  overflow: auto;
  margin: 0 auto;
  font-weight: bold;
}

.present {
  float: right;
  margin-top: -400px;
  margin-right: 50px;
  color: white;  
}

.present .name {
  text-align: center;
}

.name::before {
  content: url("img/blue_dot.png");
  margin-right: 10px;
}

<div class="chat">
  <div class="messages"></div>
  <input type="image" id="imgClick" src="css/img/arrow.png">
  <textarea class="entry" placeholder="Enter or arrow to send&#10;Shift+enter for new line"></textarea>
</div>

<div class="indexBoxes">
  <form action="index.php" method="POST">
    <input type="submit" class="btn btn-info" name="logout" value="Logout">
  </form>
</div>

<div class="present">

</div>

现在，由于我将聊天框设置为可调整大小（resize:both），因此当用户尝试更改其大小时，屏幕<div class="present"></div>右侧的当前用户列表也会移动用它。如果用户更改高度-将其向下拖动-列表也会下降。我尝试通过为列表提供position: absolute来阻止它，然后将其移回右侧，以防止出现这种情况，但是它不起作用，仍然随聊天一起移动。我还尝试过不使用margin: 0 auto将框居中，以为它会产生任何效果，但这也不起作用。

任何建议将不胜感激。

谢谢！

Answer 1

如果我了解得很好，您正在尝试用右上角的“ present”类修复“ div”，不是吗？如果我对您的问题有很好的了解，请尝试查看为您的问题制作的代码段。

.chat {
  margin-top: 10px;
}

.chat .messages {
  background-color: white;
  border: 1px solid #ccc;
  width: 300px;
  height: 250px;
  padding: 10px;
  resize: both;
  overflow: auto;
  margin: 0 auto;
  font-weight: bold;
}

.present {
  float: right;

  margin-right: 50px;
  position: absolute; /*added*/
  right: 0; /*added*/
  top: 0; /*added*/
  color: black;
}

.present .name {
  text-align: center;
}

.name::before {
  content: url("img/blue_dot.png");
  margin-right: 10px;
}

<div class="chat">

  <div class="messages"></div>

  <input type="image" id="imgClick" src="css/img/arrow.png">

  <textarea class="entry" placeholder="Enter or arrow to send&#10;Shift+enter for new line"></textarea>

</div>

<div class="indexBoxes">

  <form action="index.php" method="POST">

    <input type="submit" class="btn btn-info" name="logout" value="Logout">

  </form>

</div>

<div class="present">User123<br>User321</div>

如果您需要进一步的说明，请告诉我。

CSS-调整div的大小会影响相邻的div

1 个答案: