一：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. pytest_1安装和启动

    一.安装和启动 1.1 安装pytest 1. 键入Ctrl+R,打开cmd,输入命令至python环境下(本机:D:\Python27>) 2. 在python环境下运行下面的命令即可安装py ...

  2. python学习笔记：（十一）模块

    模块是指一个包含定义的函数和变量的文件,其后缀名为.py.模块可以被别的程序引用,并使用其中的函数等功能. 1.import语句 如果需要使用模块,只需要在新模块中导入模块.使用import关键字 如 ...

  3. tensorflow增强学习应用于一个小游戏

    首先需要安装gym模块,提供游戏的. 1,所需模块 import tensorflow as tf import numpy as np import gym import random from c ...

  4. 深入理解java：2.4. 线程本地变量 java.lang.ThreadLocal类

    ThreadLocal,很多人都叫它做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多. 可能很多朋友都知道ThreadLocal为变量在每个线程中都创建了一个副本,那样每个线程可以访问自己内 ...

  5. Vim命令合集（四）

    Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...

  6. 第六周课程总结&试验报告（四）

    一.实验目的 (1)掌握类的继承方法 (2)变量的继承和覆盖,方法的继承,重载和覆盖实现 二.实验内容 三.实验过程 1. 实验源码 package test; import java.util.Sc ...

  7. C语言Ⅰ作业12—学期总结

    一.我学到的内容 二.我的收获 作业链接 收获 C语言Ⅰ博客作业01 认识了PTA编程,博客园,Markdown基本语法1,Markdown基本语法2 C语言Ⅰ博客作业02 PTA系统常见问题解答 C ...

  8. 爬取网易云音乐评论！python 爬虫入门实战（六）selenium 入门！

    说到爬虫,第一时间可能就会想到网易云音乐的评论.网易云音乐评论里藏了许多宝藏,那么让我们一起学习如何用 python 挖宝藏吧! 既然是宝藏,肯定是用要用钥匙加密的.打开 Chrome 分析 Head ...

  9. [转帖]Linux下批量替换文件内容方法

    Linux下批量替换文件内容方法 https://www.cnblogs.com/fjping0606/p/4428850.html 刚才用到的命令 原作者写的挺好的记录一下 以后 用. 1:查找fi ...

  10. js中this.index使用

    上面圈出的那句没有执行,因为this.index 是undefined,(也不能直接使用i取代this.index,原因是i不是变化的值,使用alert打印输出的i值始终为3) 解决方式:在for语句 ...