css img布局

图片占位

<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标签之间的间距问题原理

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>

多行左右布局

下面得都是这个样式

1. 前者浮动,后者为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>

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

.box {
    width: 300px;
}

.img {
    float: left;
}

.text {
    margin-left: 100px;
}

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

3. 两者都设置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;
}

4. flex布局

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

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

5. 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;
    /*清除默认样式*/
}

图片可居中 设置

.img{
 vertical-align: middle;
}

可看我的另一篇文章一行内的多行文本(input右侧的一行或多行文本) ,和这个效果类似

欢迎提供其他方法?????????