css里，怎样使多个div元素并列一行？

html-css021

css里，怎样使多个div元素并列一行？,第1张

使多个div并列一行的方法是将div的css样式设知定为浮动方式：float:left或者是设定为inline-block行内块元道素【ie6下设置为inline行内元素已保证兼容性】。版

前提是几个div宽度总和不能超出父元素的宽度。

<div

class="d1

clearfix">

<div

class="d1-1"></div>

<div

class="d1-2"></div>

<div

class="d1-3"></div>

</div>

css:

.d1{

width:1200px

margin:0

auto

overflow:hidden}

.d1

div{

float:left/*将块元素div设定权为左浮动*//*display:inline-block

_display:inline*/

width:400px

height:150px

background:#ccc}

方法一：把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>

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