使用CSS如何让两个div并排显示

html-css012

使用CSS如何让两个div并排显示,第1张

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

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

first-child

first-child表示选择列表中的第一个标签。代码如下:

li:first-child{background:#090}

上面的意思是,li 列表中的 第一个li模块的背景颜色。

2

last-child

last-child表示选择列表中的最后一个标签,代码如下:

li:last-child{background:#090}

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

margin:0

}

.stage{

position:relative

}

.left{

position:absolute

left:0

top:0

background-color:green

width:200px

height:500px

}

.center{

margin-left:200px

background-color:orange

height:500px

}

</style>

</head>

<body>

<div class="stage">

<div class="left"></div>

<div class="center"></div>

</div>

</body>

</html>