一：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. UniEAP V4 开发实践说明文档

    一.开发环境搭建 1. 前期准备 Java jdk1.6 ,Oralce数据库,plsql客户端,tomcat6.0,开发样例数据库脚本,unieap脚本,unieap工程,unieap worksh ...

  2. 【神经网络与深度学习】用训练好的caffemodel来进行分类

    现在我正在利用imagenet进行finetune训练,待训练好模型,下一步就是利用模型进行分类.故转载一些较有效的相关博客. 博客来源:http://www.cnblogs.com/denny402 ...

  3. vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法

    HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...

  4. [转帖]VMWare官网:无法关闭 ESXi 主机上的虚拟机 (1014165)

    无法关闭 ESXi 主机上的虚拟机 (1014165) https://kb.vmware.com/s/article/1014165?lang=zh_CN Last Updated: 4/17/20 ...

  5. Excel透视表基础之字段布局与重命名、更新、数字格式设置、空值与错误值、

    字段布局与重命名 经典布局切换 字段布局 默认布局:文本类型在行区域.数字类型在值区域. 最好用鼠标拖拽. 字段重命名 可以在字段设置中更改. 透视表更新 延迟更新 手动刷新 自动刷新 刷新注意事项 ...

  6. springboot - 应用实践（1）认识springboot

    1.为什么要推出springboot springboot设计的目的是用来简化新spring应用的初始搭建以及开发过程.springboot遵循“约定优于配置”原则. 2.springboot默认的配 ...

  7. 【洛谷p1781】宇宙总统

    宇宙总统[题目链接] 关于题目算法,其实就是考排序,那我们直接sort不就好啦,显然不能. 这个题让我重新认识了cmp函数: 以下是我的心路历程: 看到这个题,嗯?这么简单的吗,我直接sort不就好啦 ...

  8. [LeetCode] 完全二叉树的节点个数

    题目链接: https://leetcode-cn.com/problems/count-complete-tree-nodes 难度:中等 通过率:57.4% 题目描述: 给出一个 完全二叉树 ,求 ...

  9. SparkML之推荐算法ALS

    参考: SparkML之推荐算法(一)ALS --有个比较详细的讲解,包含blocks使用. Spark ALS源码总结 //TODO 源码,集群尝试.研究blocks使用原理及作用. 官方解释:nu ...

  10. Jmeter 设置默认语言为中文

    1.在apache-jmeter-4.0\bin目录下,打开jmeter.properties; 2.将#language=en改为#language=cn,保存 3.重新启动jmeter.