float：left的妙用

　　在html页面中，我们总是会遇到这样的情况：

 

当然，这是比较简单的情况，用ul内包li就可以，

<ul>

<li><img src="logo.jpg">BUSINESS COMPANY</li>

<li>HOME PAGE</li>

<li>ABOUT US</li>

<li>SERVICES</li>

<li>SUPPORT</li>

<li>CONTACT</li>

</ul>

在写css样式的时候，当设置li的样式时，可以将li的float属性设置为：float：left，

li{

display：inline-block；

width：75px；

height：40px；

background：grey；

float：left//这条最重要，要将几条li水平显示

}

 

 

而遇到大的div块级元素时，这种向左浮动的方式同样适用，例如

像这种情况，也可以设置ul，在里面写入li，将这几个div置于li里面，在设置flloat：left，但是相对麻烦，我们可以采取如下办法：

三个div均设置class，class名写成一样；

<div class="pal_pic"></div>

<div class="pal_pic"></div>

<div class="pal_pic"></div>

在下面的pal_pic写属性时，可做如下处理：

.pal_pic{

width: 30.333%;
float: left;//这条非常重要，可将几个clas名一样的div水平排列
margin-left: 15px;

}

 

随后，往div里写入内容后，即可达到全部水平排列的效果。

 

转载于:https://www.cnblogs.com/xiangxiao/p/4732874.html