html - 当两个 标签并排放置时，左边 的内容会随着我向右边 插入内容而移动。但我不想要这个

Question

这是我的代码的 jsfiddle 链接:

https://jsfiddle.net/Krisalay/zvxxeagh/

我的 HTML 代码是:

<div class="MainPanel-sidebarPanelANDContentPanel-Container">
  <div class="MainPanel-changableContainer">
    <div class="MainPanel-changableContainer-chatPanel">
      <div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 1</div>
      <div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:lightcoral;">MESSAGE 2</div>
      <div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>

    </div>
  </div>
  <div class="MainPanel-SidebarPanel" ng-controller="ProfileController">
    <div class="MainPanel-SidebarPanel-ItemsPanel">
      <label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 1</label>
      <label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 2</label>
      <label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 3</label>
    </div>
  </div>
</div>

CSS 代码是:

.MainPanel-sidebarPanelANDContentPanel-Container {
  position: relative;
}

.MainPanel-changableContainer {
  position: relative;
  float: left;
  display: block;
  margin-left: 23.7%;
  background-color: red;
  width: 76.3%;
  overflow-wrap: break-word;
  height: auto;
}

.MainPanel-changableContainer-chatPanel {
  position: relative;
  display: block;
  overflow-y: scroll;
}
.MainPanel-changableContainer-chatPanel-MessagePanel {
  position: relative;
  padding: 15px;
}

.MainPanel-SidebarPanel {
  position: relative;
  background-color: white;
  width: 22%;
  padding: 10px;
  color: #5b5b5b;
  font-size: 14px;
}

.MainPanel-SidebarPanel-ItemsPanel {
  position: relative;
  padding: 10px;
  margin-top: 1px;
  cursor: pointer;
}
.MainPanel-SidebarPanel-ItemsPanel-ItemText {
  position: relative;
  margin-left: 25%;
}

我想防止容器侧边栏中的元素自动向下移动 新消息将进入聊天面板

The design Image

Answer 1

我对您的样式进行了一些更改以解决问题:https://jsfiddle.net/IA7medd/3s2uv1zc/1/

首先在这个类 .MainPanel-changableContainer 中，我删除了 margin-left 并让它向右浮动而不是向左浮动然后我从这个类 .MainPanel-SidebarPanel 中删除了填充，现在它的宽度是 23.7%

你的新风格应该是这样的:

.MainPanel-sidebarPanelANDContentPanel-Container {
  position: relative;
}

.MainPanel-changableContainer {
  position: relative;
  float: right;
  display: block;
  background-color: red;
  width: 76.3%;
  overflow-wrap: break-word;
  height: auto;
}

.MainPanel-changableContainer-chatPanel {
  position: relative;
  display: block;
  overflow-y: scroll;
}
.MainPanel-changableContainer-chatPanel-MessagePanel {
  position: relative;
  padding: 15px;
}

.MainPanel-SidebarPanel {
  position: relative;
  background-color: white;
  width: 23.7%;
  color: #5b5b5b;
  font-size: 14px;
}

.MainPanel-SidebarPanel-ItemsPanel {
  position: relative;
  padding: 10px;
  margin-top: 1px;
  cursor: pointer;
}
.MainPanel-SidebarPanel-ItemsPanel-ItemText {
  position: relative;
  margin-left: 25%;
}