当两个<div>标签并排时，当我<div>向右插入内容时，左边的内容会移动<div>。但我不想要这个

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%;
}

我想阻止侧边栏中容器中的项目自动向下移动，因为新消息将进入聊天面板

设计图像

Answer 1

我对你的风格做了一些更改，解决了这个问题：https://jsfiddle.net/IA7medd/3s2uv1zc/1/

这个班的第一名。MainPanel changeableContainer我去掉了左边的空白，使其向右浮动，而不是向左浮动然后我去掉了这节课上的填充物。主板边栏面板和它的宽度现在是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%;
}

Answer 2

之所以会发生这种情况，是因为您将DOM树中的第一个元素用margin-left向左浮动。

您可以将float: right和float: left放在下一个元素中以避免这种行为。

查看此小提琴

Answer 3

将CSS更改为：

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

Answer 4

进行了如下更改：

首先添加这个：

<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 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 class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>
      <div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>
    </div>
  </div>

CSS更改：

.MainPanel-changableContainer {
  position: relative;
  float: left;
  display: block;
  //margin-left: 23.7%;
  //background-color: red;
  width: 73.3%;
  overflow-wrap: break-word;
  height: auto;
}
.MainPanel-SidebarPanel {
  position: relative;
  background-color: white;
  width: 22%;
  padding: 10px;
  color: #5b5b5b;
  font-size: 14px;
  float:left;
}

jsFiddle

如果这是你想要的，请告诉我。。。