多個塊元素一行顯示有哪幾種方法

1.浮動法

<style>
    *{margin:0;padding:0;}
    .box{width:600px;height:400px;border:1px solid red;}
    .one{width:100px;height:100px;border:1px solid #000;float:left;}
</style>

<div class="box">
    <div class="one">第一個</div>
    <div class="one">第二個</div>
    <div class="one">第三個</div>
</div>

2.轉行塊元素

<style>
    *{margin:0;padding:0;}
    .box{width:600px;height:400px;border:1px solid red;}
    .one{width:100px;height:100px;border:1px solid #000;display:inline-block;}
</style>

外間距解決辦法.box{font-size:0;}
把字體再改回來.one{font-size:14px;}

3.定位

4.彈性布局display:flex

<style>
    *{margin:0;padding:0;}
    .box{width:600px;height:400px;border:1px solid red;display:flex;flex-direction:row;}
    .one{width:100px;height:100px;border:1px solid #000;flex:1;}
</style>

5.轉單元格display:table-cell

<style>
    *{margin:0;padding:0;}
    .box{width:600px;height:400px;border:1px solid red;}
    .one{width:100px;height:100px;border:1px solid #000;display:table-cell;}
</style>