Html 如何将两个css元素放在同一行中（一个相邻）？

我有两个css元素：

css文件

.chat .messages {
    overflow-y: scroll;
    height: calc(100% - 6em);
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.5);
    width: calc(100% - 11em);
    margin: 1em;
    margin-bottom: 0;
    box-shadow: 1px 1px 18px #fff;
    float: left;
}

.chat .users {
    overflow-y: scroll;
    height: calc(100% - 6em);
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.5);
    width: calc(11em);
    margin: 1em;
    margin-bottom: 0;
    box-shadow: 1px 1px 18px #fff;
    float: left;
}

html文件：

<div class="members">
    </div>

    <div class="users"></div>

我想要的是：

 ___      ________________
|   |    |               |
|        |               |     
|   |    |               |
|   |    |               |
 ____     ________________  

---

有很多方法可以并排对齐项目。 我用

float:left做了一个例子。它也适用于
display:inline块

但是您需要设置2个
div的
宽度
，记住它们需要彼此相邻。因此，您可以使用百分比，例如
80%
和
20%
，如果您想使用
calc（）
，请计算宽度，使其适合……否则它们将一个接一个地堆叠

在您的情况下，
.users
的宽度为
11em
和
margin:1em
加上
边框
1px
。因此，首先需要设置
框大小：边框框
，使
边框：1px
位于其
11em
宽度内，并且不会使元素变宽

然后您需要计算
.users
实际占用
11em+2em=13em
，2em是因为
左边距：1em
和
右边距：1em

与具有
边距：1em
的
成员相同，因此在计算
成员的宽度时，需要记住
2em
（也不要忘记将
框大小：边框框
添加到此元素）

最后，
成员的宽度将为
100%-.usersWidth-2em（从页边开始）
so

.members {
     width:calc(100%-15em)
}


.members{
溢出y：滚动；
高度：计算（100%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
宽度：钙（100%-15em）；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：左；
高度：100px；
框大小：边框框；
}
.用户{
溢出y：滚动；
高度：计算（100%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
宽度：11em；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：左；
高度：100px；
框大小：边框框；
}
有很多方法可以将项目并排对齐。
我用
float:left做了一个例子。它也适用于
display:inline块

但是您需要设置2个
div的
宽度
，记住它们需要彼此相邻。因此，您可以使用百分比，例如
80%
和
20%
，如果您想使用
calc（）
，请计算宽度，使其适合……否则它们将一个接一个地堆叠

在您的情况下，
.users
的宽度为
11em
和
margin:1em
加上
边框
1px
。因此，首先需要设置
框大小：边框框
，使
边框：1px
位于其
11em
宽度内，并且不会使元素变宽

然后您需要计算
.users
实际占用
11em+2em=13em
，2em是因为
左边距：1em
和
右边距：1em

与具有
边距：1em
的
成员相同，因此在计算
成员的宽度时，需要记住
2em
（也不要忘记将
框大小：边框框
添加到此元素）

最后，
成员的宽度将为
100%-.usersWidth-2em（从页边开始）
so

.members {
     width:calc(100%-15em)
}


.members{
溢出y：滚动；
高度：计算（100%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
宽度：钙（100%-15em）；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：左；
高度：100px；
框大小：边框框；
}
.用户{
溢出y：滚动；
高度：计算（100%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
宽度：11em；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：左；
高度：100px；
框大小：边框框；
}


。消息{
溢出y：滚动；
高度：计算（100%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
宽度：钙（60%-11em）；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：左；
}
.用户{
溢出y：滚动；
高度：钙（40%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：对；
}

这是留言区
这是用户区

。消息{
溢出y：滚动；
高度：计算（100%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
宽度：钙（60%-11em）；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：左；
}
.用户{
溢出y：滚动；
高度：钙（40%-6em）；
背景：rgba（255255,0.9）；
边界半径：5px；
边框：1px实心rgba（0,0,0,0.5）；
边缘：1米；
页边距底部：0；
盒影：1px18px#fff；
浮动：对；
}

这是留言区
这是用户区
我在这支笔里讲述你的具体情况：

基本上，您的代码是可以工作的，但是在计算元素宽度时，您没有考虑长方体模型，因此它们比您想象的要宽，并且不适合一行。默认情况下，宽度不包括填充或边框。要解决此问题，您可以使用：

*{box size:border box；}
这将使AL