CSS+DIV把八个层并排显示!!!

如何把层并排显示(CSS+DIV)
      如何实现CSS样式之多个层DIV并排布局?对于初会CSS的朋友,这个也有点难度,不知道是如何下手去写CSS,其实,这个也容易实现,所以,我便做了一下实例,分享给大家;说明(自己做了一天!!!)
               样式图片如下:
               代码如下:
                      <html>
<head>
<style type="text/css">
body {background-color: yellow}
p {font-size:65px;text-align: center}
</style>
</head>
<body>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:185px;margin-top:100px;"><p>心</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:60px;margin-top:100px;"><p>怀</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:60px;margin-top:100;"><p >梦</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:60px;margin-top:100px;"><p>想</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:185px;margin-top:100px;"><p>不</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:60px;margin-top:100px;"><p>断</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:60px;margin-top:100px;"><p >拼</p></div>
<div  style="background-color: gray;width: 200px;height:200px;float:left;margin-left:60px;margin-top:100px;"><p>博</p></div>
</body>
</html>

你可能感兴趣的:(css,div)