怎么实现CSS横排图片并列2-4张

html-css014

怎么实现CSS横排图片并列2-4张,第1张

最常用的一种方法:就是浮动,浮动之后会自动往右挤,挤不下就到第二行了。  

     <ul>

           <li>第一张图片</li>

           <li>第二张图片</li>

           <li>第三张图片</li>

           <li>第四张图片</li>

           <li>第五张图片</li>

           <li>第六张图片</li>

           <li>第七张图片</li>

           <li>第八张图片</li>

    </ul>

<style> ul{width:800px height:200px} li{width:195pxheight:98pxmargin:1px auto float:leftlist-style-type:none}

</style>

css如何让三个div并排展示,其实就是设置一个浮动点,让三个div靠左或者靠右浮动;

主要标签用于:float:left(靠左对齐)float:right(靠右对齐):示例如下:

1、首先打开用到的编辑工具这里用DW

2、为了方便观察,我们把三个div设置三个背景颜色来观察,设置三个div样式这里取名:div1 div2 div3 并且引用三个样式;

详解:background:#颜色;是取的三个不同的div背景颜色;给三个div设置宽度为width:300px高度height:200px

3、展示出来的效果如图:

这里提供两种方法:

1.每3个就在后面加上<br><br>,注意是两个br这样就换行了。

2.用css来实现,控制.goods的宽度。

一般为33%,不知道你的.goods类是怎么写的,如果有margin的话就要比33%小一点。

具体代码:

<style>

* {

margin: 0

padding: 0

}

.goods {

border: 1px solid #ccc

height: 100px

width: 33.333%

float: left

     box-sizing:border-box

     padding:10px

}

</style>

<div class="goods">1</div>

<div class="goods">2</div>

<div class="goods">3</div>

<div class="goods">4</div>

<div class="goods">5</div>

<div class="goods">6</div>