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