一：div中的图片跑出来

    <style>

    /* 图片在一行 */

    #div1 li{

        float: left;

        list-style: none;

    }

    </style>

</head>

<body>

        <div id="div1">

                <ul>

                    <li><img src="pic/美女1.jpg" alt=""></li>

                    <li><img src="pic/美女2.jpg" alt=""></li>

                    <li><img src="pic/美女3.jpg" alt=""></li>

                    <li><img src="pic/美女4.jpg" alt=""></li>

                    <li><img src="pic/美女5.jpg" alt=""></li>

                    <li><img src="pic/美女6.jpg" alt=""></li>

                    <li><img src="pic/美女7.jpg" alt=""></li>

                </ul>

        </div>

</body>

</html>

图片的宽高都是200px，然后给div加上边框

  <style>

    #div1 {

        border: 1px solid red;

        width: 1402px;

        height: 202px;

    }

    /* 图片在一行 */

    #div1 li{

        float: left;

        list-style: none;

    }

    </style>

</head>

<body>

        <div id="div1">

                <ul>

                    <li><img src="pic/美女1.jpg" alt=""></li>

                    <li><img src="pic/美女2.jpg" alt=""></li>

                    <li><img src="pic/美女3.jpg" alt=""></li>

                    <li><img src="pic/美女4.jpg" alt=""></li>

                    <li><img src="pic/美女5.jpg" alt=""></li>

                    <li><img src="pic/美女6.jpg" alt=""></li>

                    <li><img src="pic/美女7.jpg" alt=""></li>

                </ul>

        </div>

</body>

</html>

尝试给ul加上margin属性

    <style>

    #div1 {

        border: 1px solid red;

        width: 1402px;

        height: 202px;

    }

    /* 图片在一行 */

    #div1 li{

        float: left;

        list-style: none;

    }

    #div1 ul{

        margin-left: 0px;  # 解决了上面，左边依然没有解决

        margin-top: 0px;

    }

    </style>

</head>

<body>

        <div id="div1">

                <ul>

                    <li><img src="pic/美女1.jpg" alt=""></li>

                    <li><img src="pic/美女2.jpg" alt=""></li>

                    <li><img src="pic/美女3.jpg" alt=""></li>

                    <li><img src="pic/美女4.jpg" alt=""></li>

                    <li><img src="pic/美女5.jpg" alt=""></li>

                    <li><img src="pic/美女6.jpg" alt=""></li>

                    <li><img src="pic/美女7.jpg" alt=""></li>

                </ul>

        </div>

</body>

</html>

原因：pading的原因，左边有距离，把最后一张照片挤下去了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>div中图片问题</title>

    <style>

    #div1 {

        border: 1px solid red;

        width: 1400px;

        height: 200px;

    }

    /* 图片在一行 */

    #div1 li{

        float: left;

        list-style: none;

    }

    #div1 ul{

        /* margin 就是ul和同级或者父级模块之间的距离 */

        margin: 0;

        /* 当div设置了宽度后，float上层标签要，置宽度，是为了让图片一行， */

        width: 1400px; # 当设置了padding=0后，可以不设置宽度

        height: 200px;

        /* 这个东西导致左边一直有空缺  padding就是 ul里面的内容与ul边框的距离*/

        padding: 0; # ul里面填充的内容，也就是li,li距离ul的外边框的距离，默认不是0，因此要自己调整

    }

    </style>

</head>

<body>

        <div id="div1">

                <ul>

                    <li><img src="pic/美女1.jpg" alt=""></li>

                    <li><img src="pic/美女2.jpg" alt=""></li>

                    <li><img src="pic/美女3.jpg" alt=""></li>

                    <li><img src="pic/美女4.jpg" alt=""></li>

                    <li><img src="pic/美女5.jpg" alt=""></li>

                    <li><img src="pic/美女6.jpg" alt=""></li>

                    <li><img src="pic/美女7.jpg" alt=""></li>

                </ul>

        </div>

</body>

</html>

# TODO

div中的图片跑出来的更多相关文章

  1. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  2. 怎样在div中添加图片或设置颜色

    1.插入图片<div><img src="图片地址" /></div>2.图片做背景<div style="background ...

  3. 浮动div中的图片垂直居中

    table-cell方法垂直水平居中 <!DOCTYPE html> <html> <head> <meta name="description&q ...

  4. 1.怎样控制div中的图片居中

    答案如下: #div{ width: 100%; height: 100%; border: 1px solid #000; text-align: center;}#div img{ vertica ...

  5. 使用 <!DOCTYPE html> 让 <div><img></div>中的图片下面产生几个像素的空白间隔

    今天算是第一次使用 <!DOCTYPE html> 不经意间发现图片下方有5个像素左右的空白间隔,检查半天也没查出原因. 最后百度了一下,网上说这是 <!DOCTYPE html&g ...

  6. 设置html的div中背景图片长宽

    使用以下可行 background-size:1040px 482px;

  7. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. javascript随机将第一个dom中的图片添加到第二个div中去

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...

  9. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

随机推荐

  1. WebLogic下Argument(s) "type" can't be null.

    启动项目出现Argument(s) "type" can't be null.异常.异常如下: java.lang.IllegalArgumentException: Argume ...

  2. eclipse 引用静态库设置选项

    环境说明: 静态库文件项目:engine C++ 项目:server 在server项目中引用静态库的库文件libEngine.a 需要设置如图选项,才能引用静态库项目里的文件 主要设置: 1.inc ...

  3. unable to compile class for jsp解决方案

    今天遇到了一个错误,纠结了两天,百度很多经验,结果都不太起效.通过比较自己之前不报错的项目,发现以下解决方案. 报错: 解决方案: 1.先将jar 包复制到lib目录下. 2.将lib目录下的jar包 ...

  4. 深入理解java：2.3.6. 并发编程concurrent包 之管理类---线程池

    我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁 ...

  5. Synchronized底层优化（轻量级锁、偏向锁）（二）

    一.重量级锁 上篇文章中向大家介绍了Synchronized的用法及其实现的原理.现在我们应该知道,Synchronized是通过对象内部的一个叫做监视器锁(monitor)来实现的.但是监视器锁本质 ...

  6. c语言l博客作业04

    这作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9772 我在这个课程的目标 ...

  7. 声明一个LIst类型的数组

    ArrayList[] graphArrayList = new ArrayList[4]; for(int i=0;i<graphArrayList.length;i++){ graphArr ...

  8. empty() 为true

    //empty() 为truevar_dump(empty(0));var_dump(empty('0'));var_dump(empty(array()));var_dump(empty(null) ...

  9. YII框架微信公众号

    <?phpnamespace backend\controllers; use yii\db\Query;use yii\web\Controller;use Yii;class Exam2Co ...

  10. 如何减少程序间的耦合度？_DI与接口

    spring 开发提倡接口编程,配合DI技术可以更好的减少层(程序)与层(程序)之间的解耦合例子说明:  任务:要求:        1.打印机依赖纸张和墨盒        2.纸张有A4和B5两种  ...