Question

我正在尝试制作3列布局。

第1列：已修复(.stepnumber)

第2栏：流动(.instruction)

第3栏：修正(.stepbutton)

这是我的CSS

.container
{
    overflow: auto;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    background: #FFF;
    padding: 20px 30px;
    margin-right: 20px;
}
.stepnumber
{
    float: left;
    width: 100px;
    min-height: 100px;
    font-size: 32px;
    font-weight: 800;
    text-align: center;

}
.instruction
{
    margin: 0 20px 0 20px;

}
.stepbutton
{
    float: left;
    width: 200px;
    margin-left: -200px;
}

第三列不会浮动到流体柱的右侧，它会下降到一个新的行，而-200px的偏移会使它偏离页面。

我做错了什么？

Answer 1

请勿使用float，请使用CSS table或flex，以便更轻松。

.container {
    display: table;
    width: 100%;
}
.container > div {
    display: table-cell;
}
.left {
    background: red;
    width: 100px;
}
.middle {
    background: green;
}
.right {
    background: blue;
    width: 200px;
}

<div class="container">
    <div class="left">1</div>
    <div class="middle">2</div>
    <div class="right">3</div>
</div>

3列布局中的第三列无法正确显示

1 个答案: