html - 如何将 2 个 css 元素放在同一行(一个并排)？

Question

我有这 2 个 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>

我希望他们在同一条线上。现在他们每个人都在单独的一行中。

此外，如何将一个元素向右对齐，一个向左对齐？

现在条件:

 ___
|   |
|   |
|   |
 ____

__________________
|                |
|                |
|                |
|________________| 

我想要什么:

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

Answer 1

有很多方法可以并排对齐元素。我用 float:left; 做了一个例子。它也适用于 display:inline-block

但您需要设置 2 个 div 的 width，请记住它们需要彼此相邻。所以要么你使用百分比，例如 80% 和 20% 或者如果你想使用 calc() ，计算宽度以便它们适合...否则它们会一个接一个地堆叠

在您的例子中，.users 的宽度为 11em 和 margin:1em 加上一个 border 1 像素。所以首先你需要设置 box-sizing:border-box 所以 border:1px 在里面是 11em 宽度并且不会元素更宽

然后你需要计算 .users 实际上占用 11em+2em=13em , 2em 因为 margin-left:1em和 margin-right:1em

与 members 相同，它具有 margin:1em 因此在计算 members 的宽度时需要记住 2em (也不要忘记将 box-sizing:border-box 添加到此元素)

最后，members 的宽度为 100% - .usersWidth - 2em(from margin) 所以

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

.members {
    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% - 15em);
    margin: 1em;
    margin-bottom: 0;
    box-shadow: 1px 1px 18px #fff;
    float:left;
    height:100px;
    box-sizing:border-box;
    
}

.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: 11em;
    margin: 1em;
    margin-bottom: 0;
    box-shadow: 1px 1px 18px #fff;
    float:left;
     height:100px;
     box-sizing:border-box;
}

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

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

P.S. 使用 display:inline-block 会在元素之间添加“众所周知的附加空白”，有一些处理空白的方法，但我建议您使用 float:left 作为上面的示例。