3列布局中的第三列顯示不正確

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>