如何在一行中排列 div 元素

Question

My HTML Code：

   <div>
        <div class="card login">
            <div class="label">
                <p id="Title">Plex</p>
            </div>
        </div>
        <div class="card welcome">
            <div class="label">
            </div>
        </section>
    </div>

我的CSS代码应该是什么样子才能使这两个"卡片"对齐成一行？请注意，标签的颜色将与卡片的其余部分不同。我正在寻找类似于这样的结果：

┌─────┐   ┌─────┐
│Label│   │Label│
├─────┤   ├─────┤
│     │   │     │
│     │   │     │
└─────┘   └─────┘

这是我到目前为止的CSS代码：

.card login{
    width: 400px;
    height: 500px;
    margin-left: 10px;
    background-color: #f3f3f3;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}
.card welcome{
    width: 400px;
    height: 500px;
    background-color: #f3f3f3;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}
.label {
    display: inline-block;
    background-color: #434342;
    max-width:400px;
    height: 55px;
    z-index: 999;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

#Title {
    font-family: Thinfont-Bold;
    color: #d2731d;
    margin-left:40%;
    margin-right:32%;
    font-size: 50px;
}

Answer 1

<div>
    <div class="card login">
        <div class="label">
            <p id="Title">Plex</p>
        </div>
    </div>
    <div class="card welcome">
        <div class="label"></div>
    </div>
</div>
.card{
    display: inline-block;
    width: 100px;
}

演示：http://jsfiddle.net/DerekL/UHu8K/

请注意，代码中的一个大问题是您有两个具有相同id的元素。这将使一些浏览器吓坏了，你真的不应该这样做。我在代码中将其更改为类。

或者，如果

所有卡片的高度完全相同，您可以使用float: left。

.card{
    float: left;
}

IE噩梦：所有浏览器都支持inline-block。IE6 和 7 除外。但别担心，可以应用几个"黑客"来让魔术发生。

未来：所有现代浏览器都将很快支持flexbox。值得一提的是，它们更容易使用以创建灵活且更有条理的布局。但是，它目前尚未最终确定，您应该谨慎使用它。

.container{
    display: flex;
}
.card {
    flex: 1 1 auto;
}

演示：http://jsfiddle.net/DerekL/34NLZ/

Answer 2

你可以试试：

.card login{
   float: left;
}
.card welcome{
    float: left;
    clear: none;
}

只需根据需要添加边距即可。