css img布局

最新推荐文章于 2024-09-08 20:02:01 发布

潇蓝诺依

最新推荐文章于 2024-09-08 20:02:01 发布

阅读量4.7k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_31126175/article/details/84780217

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

图片占位

<img src="http://placehold.it/600x300/0f0/ccc.png" alt="">
<img src="http://temp.im/450x300/0ff/d00" alt="">

说明：

450x300 : 宽度和高度
0f0：位置代表背景颜色
ccc：位置代表字体颜色

img底部留白

解决方法

1、设置div{ font-size: 0}
2、设置img{ display: block}
3、设置img{ vertical-align:top;}
4、设置img{float}

当然推荐第二种方法，让img对象成为块级元素。

img标签之间的间距问题原理

<div style="width:130px;">
  <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
     <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
     <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
     <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
 </div>
 
 <div style="width:130px;">
     <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
     <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
     <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
     <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
 </div>

在这里插入图片描述

实际上，所有display属性为inline ， inline-block 的盒模型都会有文字特性，间距就是由于两个标签之间的空白引起的。

解决方法

1.删除标签之间的空格
2.将父级设置为font-size: 0;
3.将父级设置为使用负margin去除边距
4.设置浮动

img属于行内替换元素。height/width/padding/margin均可用。效果等于inline-block元素。
行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。

布局

上下

这里用到了figure
在这里插入图片描述

<figure style="width:100px;">
    <img  src="http://placehold.it/100x50/0f0/ccc.png" >
    <figcaption style="text-align:center;">logo</figcaption>
</figure>
<p>----------------------------------------------------------</p>
<figure style="width:100px;">
    <figcaption style="text-align:center;">logo</figcaption>
    <img  src="http://placehold.it/100x50/0f0/ccc.png" >
</figure>

左右对齐

在这里插入图片描述
方法一:
img标签vertical-align:middle

<div>
	<img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo" style="vertical-align:middle">标题1111
</div>
<div>
   <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo" style="vertical-align:middle"><span>标题1111</span>
</div>

方法二:

<style>
.img{
    display: inline-block;
    vertical-align: middle;
}
.text{
    display: inline-block;
}
</style>
<div>
    <div class="img">
        <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
    </div>
    <div class="text">
        标题1111
    </div>
</div>

方法三:
背景图片形式,设置margin-left留出图片位置.

两行等高

在这里插入图片描述

<style>
.img{
   display: inline-block;
   vertical-align: top;
}
.text{
    display: inline-block;
}
p{
    margin: 0;
    padding: 0;/*清除默认样式*/
    height: 25px; /*等于图片的高度的一半*/
    line-height: 25px;
}
</style>
<div>
    <div class="img">
        <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
    </div>
    <div class="text">
        <p>标题</p>
        <p>内容</p>
    </div>
</div>

多行左右布局

在这里插入图片描述
下面得都是这个样式

前者浮动,后者为display:inline-block;(父元素定宽时,后者长度溢出时,会换行;此时后者需计算并设置宽度)

<style>
        .box {
            width: 300px;
        }
        
        .img {
            float: left;
        }
        
        .text {
            display: inline-block;
            width: 200px;
        }
        
        p {
            margin: 0;
            padding: 0;
            /*清除默认样式*/
        }
    </style>
<div class="box">
        <div class="img">
            <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
        </div>
        <div class="text">
            <p>标题</p>
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
    </div>

前者浮动,后者为margin-left:前者宽度;

.box {
    width: 300px;
}

.img {
    float: left;
}

.text {
    margin-left: 100px;
}

p {
    margin: 0;
    padding: 0;
    /*清除默认样式*/
}

两者都设置display:inline-block;(中间有空隙,父元素定宽时,后者长度溢出时,会换行;此时后者需计算并设置宽度)

.box {
    width: 300px;
}

.img {
    display: inline-block;
    vertical-align: top;
}

.text {
    display: inline-block;
    width: 195px;
    /*中间有空隙  不能设置成200*/
}

p {
    margin: 0;
    padding: 0;
    /*清除默认样式*/
}

在这里插入图片描述

.img,.text{
 vertical-align: middle;
}

flex布局

.box {
    width: 300px;
    display: flex;
}
.text {
    flex: 1;
}

p {
    margin: 0;
    padding: 0;
    /*清除默认样式*/
}

table

.box {
    width: 300px;
    display: table;
}

.img {
    display: table-cell;
    vertical-align: top;
}

.text {
    display: table-cell;
    vertical-align: top;
}

p {
    margin: 0;
    padding: 0;
    /*清除默认样式*/
}