img与div如何在一行显示

奇奇怪怪的土豆饼

已于 2022-04-03 00:02:11 修改

阅读量7.2k

点赞数 3

分类专栏： html与css系列文章标签： html5 css

于 2022-04-02 23:51:01 首次发布

本文链接：https://blog.csdn.net/m0_50013284/article/details/123915669

版权

html与css系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

三、为什么要给img与div都给float

总结

一、相关知识介绍

1、img 行内块元素

和相邻元素（行内/内联块元素）在同一行显示，他们之间会有空白缝隙，一行可以显示多个。
默认宽度就是它本身的内容宽度
不用转化块级元素，直接就可以设置宽度、高度、行高、外边距以及内边距，默认从左到右。

2、div块级元素

比较霸道，自己独占一行
高度、宽度、外边距都可以控制
宽度默认是容器（父级元素）的100%
是一个容器及盒子，里面可以是行内或者块级元素。

3、浮动

浮动的作用：实现页面的排版布局，让元素脱离原有的标准流，半脱离。

属性：float

属性值：left--------左浮动

right-------右浮动

二、实现方法

给img与div同时添加浮动属性float，可以实现img与ul在同一行显示。

1、在body中设置img与div结构

 <img src="小猪佩奇.jpg" alt="">
    <div></div>

2、在<head>中设置img 宽高，设置div的宽高与背景颜色

        img{
            width: 200px;
            height: 200px;
        }
        div{
            width: 400px;
            height: 200px;
            background-color: yellow;
        }

3、在浏览器显示效果

4、给img与div添加float属性（在css中添加）

     img{
            width: 200px;
            height: 200px;
            float:left;
        }
        div{
            width: 400px;
            height: 200px;
            background-color: yellow;
            float:left;
        }

5、在浏览器的效果