多个块元素一行显示有哪几种方法

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>