一：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. 四十三：数据库之SQLAlchemy之group_by和having子句

    group_by:根据某个字段进行分组,比如想要根据年龄进行分组,再统计每一组有多少人having:对查找结果进一步过滤,类似于SQL语句的where 准备工作 from sqlalchemy imp ...

  2. IDEA工具创建项目并提交码云和一些基本使用

    https://blog.csdn.net/autfish/article/details/52513465https://blog.csdn.net/zsyoung/article/details/ ...

  3. Redis 下载与配置window服务

    1.Redis下载 Git下载地址:https://github.com/MicrosoftArchive/redis/releases 2.配置Window服务 步骤一:在 Redis目录 输入 c ...

  4. Shell编程、part5

    本节内容 1. 三剑客简介 2. sed命令详解 3. awk命令详解 文本处理三剑客 在 Shell 下使用这些正则表达式处理文本最多的命令有下面几个工具: |                 命令 ...

  5. flask第一级

    #从flask这个包中导入Flask这个类 #Flask这个类是项目的核心,以后很多操作都是基于这个类的对象 #注册url.注册蓝图等都是基于这个类的对象 from flask import Flas ...

  6. RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in major version and less than or equal in minor version as the specified version cap 4.11.

    [问题描述] RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in ...

  7. spring boot-14.集成MyBatis

    1.如何使用注解版Mybatis? (1)引入mybatis ,druid,Mysql 的依赖,环境搭建可以参考第13篇的内容 <dependency> <groupId>or ...

  8. CentOS7 nginx 最简单的安装以及设置开机启动

    1. 下载tar包. 2. 解压缩tar包 3. 安装必须的部分 yum包 yum install -y gcc pcre pcre-devel openssl openssl-devel gd gd ...

  9. PostgreSQL数据库表的内部结构

    A page within a table contains three kinds of data described as follows: heap tuple(s) – A heap tupl ...

  10. Spring（五）--autowire自动装配和spel

    autowire自动装配和spel 1.需要的实体类 2.需要的配置文件 <?xml version="1.0" encoding="UTF-8"?> ...