Question

我的HTML代码：

   <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。 Except IE6 and 7.但请不要担心，several "hacks" can be applied to make magic happens。

所有现代浏览器都将很快支持

未来： 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;
}

只需根据需要添加边距。

如何在一行中排列div元素？

2 个答案: