css如何让多个div盒子并排同行显示？

一、使用css float并排显示

我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。

<style>
    div {float:left}
</style>

这里我们对div通设一个浮动，当然实际使用时候，要通排显示div对象的加入css类，我们就对要同行显示css选择器设置浮动。避免其它不需要设置的也被加入浮动样式。

二、使用css display同行显示

我们加入display:inline即可解决实现同行并排显示div盒子对象。

<style>
    div {display:inline}
</style>

实例：

如果有三个div，分別为left , middle, right

而left与right的宽度是固定的，要依照不同的解析度将middle自动填满剩余的部分

做法如下

<divclass='container'>
    <divclass='right'>
        col3
    </div>
    <divclass='left'>
        col1
    </div>
    <divclass='middle'>
        col2
    </div></div>


.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

以上就是css如何让多个div盒子并排同行显示？的详细内容，更多请关注0133技术站其它相关文章！