一：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. Octavia Rocky UDP 负载均衡功能试验

    目录 文章目录 目录 前言 UDP 简述 功能验证 网络拓扑 资源对象清单 验证 TS Amphorae UDP 包被非法篡改 存疑 前言 以往,Octavia 通过 HAProxy + Keepal ...

  2. CentOS7 下SaltStack部署

    一,概念SaltStack是一个服务器基础架构集中化管理平台,具备配置管理.远程执行.监控等功能,一般可以理解为简化版的puppet和加强版的func.SaltStack基于Python语言实现,结合 ...

  3. centos v7.0解决乱码

    [root@localhost ~]# ll 鎬荤敤閲4-rw-------. 1 root root 1045 8鏈 24 21:17 anaconda-ks.cfg [root@localhost ...

  4. 【深度聚类】Superpixel Sampling Networks

    Superpixel Sampling Networks 原始文档:https://www.yuque.com/lart/papers/ssn 本文的思想很简单,传统的超像素算法是一种有效的低/中级的 ...

  5. java.time包常用类API学习记录

    Java8出来已那么多年了,java.time包之前一直没有使用过,最近正好有用到,在此做个记录. 上图列出了java.time包下的类,接下来我们详细看下其中每个类的用法. Clock:获取到当前时 ...

  6. 初步学习jquery学习笔记（二）

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

  7. js实现回车键搜索

    前端关键代码: <input type="text" onkeydown="entersearch()" class="form-control ...

  8. python-day16(正式学习)

    目录 模块 什么是模块? 模块的四种形式 为什么要用模块 如何用模块 import from...import... 异同 循环导入问题 解决方案 1. 2. 模块搜索路径 random模块 模块 什 ...

  9. Python 最常见的 170 道面试题全解析：2019 版

    Python 最常见的 170 道面试题全解析:2019 版 引言 最近在刷面试题,所以需要看大量的 Python 相关的面试题,从大量的题目中总结了很多的知识,同时也对一些题目进行拓展了,但是在看了 ...

  10. php 图像处理 抠图,生成背景透明png 图片

    *自定义一个图片等比缩放函数 *@param string $picname 被缩放图片名 *@param string $path 被缩放图片路径 *@param int $maxWidth 图片被 ...