CSS如何设置并排显示

html-css029

CSS如何设置并排显示,第1张

使用3.0的column属性即可设置

div

{

columns:100px 3

-moz-columns:100px 3/* Firefox */

-webkit-columns:100px 3/* Safari 和 Chrome */

}

方法一：把div设为“行内块级元素”：

<style>

div {display:inline-block border:1px solid #000}

</style>

<div>第一个div</div>

<div>第二个div</div>

方法二：使用浮动：

<style>

div {float:left border:1px solid #000}

br {clear:both}

</style>

<div>第一个div</div>

<div>第二个div</div>

<br/>

方法三：使用flex布局：

<style>

.main {display:flex flex-direction:row}

.sub {border:1px solid #000}

</style>

<div class=main>

   <div class=sub>第一个div</div>

   <div class=sub>第二个div</div>

</div>

还有其他多种方法实现，就不一一列出了