Question

这是我的代码的jsfiddle链接：

我的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我删除了左边距并让它漂浮在右边而不是左边然后我从这个类.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%;
}

Answer 2

之所以发生这种情况，是因为您将DOM树中的第一个元素向左移动require。

您可以将margin-left代替float: right添加到下一个元素以避免此行为。

See this fiddle

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

请告诉我这是否是您要找的......

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

4 个答案: