必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

 所以我们给每个图片一个父元素 让父元素的宽

2019-09-21 03:00 来源:未知

浅谈图片宽度自适应实施方案

2015/10/19 · CSS, HTML5 · 3 评论 · 自适应

原稿出处: 百码山庄   

在网页设计中,随着响应式设计的来到,各样响应式实施方案不足为奇。对于图片响应式的标题也是有过多前端开采人士在进展切磋。比较好的图形响应式设想正是在不一致的显示器分辨率下利用不一样实际尺寸的图样,而落得在高效互联网情状中动用大或重特大高清图片,在低速互连网或索要替客商节省流量能源的景况中使用小而明显的图样,保障客商无论在何种蒙受下都能有绝妙的浏览体验。但是那是二个天崩地塌而具备挑衅的办事,笔者这边不做这几个商量,因为自个儿这段日子还并未那上面很好的奉行。这里笔者是要跟大家座谈下同一张图片在分化幅度的展示区域中的呈现难题。

    vertical-align: middle;

4. float的克星

既是使用float属性会推动一密密麻麻的问题,那么有未有法子解决这一个主题素材啊?答案是:鲜明有。接着看下文。

CSS布局之div交叉排布与底部对齐--flex实现,css--flex

多年来在用wordpress写页面时,设计员给出了一种网页排布图样,从前未有碰着过,其在Computer上(分辨率大于768px)的效果图如下:

图片 1

而在手提式有线电话机(分辨率小于等于768px)上务求这样排列:

图片 2

本人想到了三种情势

率先种是用bootstrap的row、col-md合营col-md-push、col-md-pull来完毕,代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title">
 7     <title>div左右交叉布局--文字和图片交叉</title>
 8   </head>
 9   <body>
10 <style>
11 .C {
12   margin: auto;
13   padding: 30px 20px 40px;
14   max-width: 600px;
15 }
16 .I {
17   width: 100%;
18 }
19 .IW, .TW {
20   border: 1px solid rgba(0, 0, 0, 0.3);;
21 }
22 .TW {
23   padding: 25%;
24 }
25 </style>
26 <div class="C">
27   <div class="row">
28     <div class="col-md-6">
29       <div class="IW">
30         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 3">
31       </div>
32     </div>
33     <div class="col-md-6">
34       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
35     </div>
36   </div>
37   <div class="row">
38     <div class="col-md-6 col-md-push-6">
39       <div class="IW">
40         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 4">
41       </div>
42     </div>
43     <div class="col-md-6 col-md-pull-6">
44       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
45     </div>
46   </div>
47   <div class="row">
48     <div class="col-md-6">
49       <div class="IW">
50         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 5">
51       </div>
52     </div>
53     <div class="col-md-6">
54       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
55     </div>
56   </div>
57 </div>
58   </body>
59 </html>

微型Computer上效果与利益:

图片 6     

手提式有线电话机上效果:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>div左右陆陆续续布局--文字和图片交叉</title> 7 </head> 8 <body> 9 <style> 10 .C { 11 margin: auto; 12 padding: 30px 20px 40px; 13 max-width: 600px; 14 } 15 .本田UR-V { 16 display: block; 17 width: 百分百; 18 } 19 @media only screen and (min-width: 768px) { 20 .宝马X3 { 21 display: flex; 22 width: 百分百; 23 } 24 } 25 .ENVISION:nth-child(even) { 26 flex-direction: row-reverse; 27 } 28 .I, .W { 29 width: 二分之一; 30 } 31 .I img { 32 width: 百分百; 33 } 34 .W { 35 display: flex; 36 flex-direction: column; 37 font-size: 16px; 38 justify-content: center; 39 } 40 </style> 41 <div class="C"> 42 <div class="福特Explorer"> 43 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 44 <div class="W">作者是文字,作者利用了flex布局,小编按column在主轴y轴上居中对齐。</div> 45 </div> 46 <div class="宝马X3"> 47 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 48 <div class="W">笔者是文字,笔者利用了flex布局,作者按column在主轴y轴上居中对齐。</div> 49 </div> 50 <div class="Kuga"> 51 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 52 <div class="W">笔者是文字,小编利用了flex布局,小编按column在主轴y轴上居中对齐。</div> 53 </div> 54 </div> 55 </body> 56 </html>

Computer上效果与利益如下:

.ENVISION:nth-child(even) { flex-direction: row-reverse; } ,然后在三弟大上让其符合规律排列就能够 .奥迪Q5 { display: block; width: 100%; } 。

 

自己还开掘,用flex能够很轻巧的贯彻四个div底部对齐,具体代码如下:

.C {
  display: flex;
  align-items: flex-end;
}
.A {
  background: rgba(255, 0, 0, 0.1);
}
.A:nth-child(odd) {
  background: #1a88ea;
  color: white;
  font-size: 30px;
  padding: 10px 15px;
}
</style>
<div class="C">
  <div class="A">创新</div>
  <div class="A">实验基地</div>
</div>

实际正是让C内的div,以主轴为x(按row排列时,主轴即为x,未指明flex-diretion时,默以为按row排列),排布方向为row,然后让div都在y轴(交叉轴)上远在尾巴部分 align-items: flex-end; 

效果如下:

<style media="screen"> .C { position: relative; } .A { display: inline-block; background: rgba(255, 0, 0, 0.1); } .A:nth-child(odd) { background: #1a88ea; color: white; font-size: 30px; padding: 10px 15px; } .A:nth-child(even) { bottom: 0; position: absolute; } </style> <div class="C"> <div class="A">革新</div> <div class="A">实验集散地</div> </div>

而是料定,用flex完毕更为简便易行。

 

ps: 作者那篇博客快写完时,chrome崩溃了5次,不知底是输入法的案由,依旧chrome自个儿的原因,反正一输入字符就自行退出。

 

 

图片 7

方今在用wordpress写页面时,设计员给出了一种网页排布图样,在此以前未有境遇过,其在计算机...

复制代码 代码如下:

回顾尝试

为了保障消息显示完整,保障图片随可视区域上升的幅度变化而宽度自适应,作者一贯给图片标签设置了上升的幅度百分之百,具体效果请看:图形宽度自适应(2)。

和演示一一律,大家依然手动改造可视区域上涨的幅度来见见图片的显现:

图片 8

近来总的来讲图片是足以依附可视区域上升的幅度自适应了,可是难点来了:首先,全体图片不论原始大小宽窄一律以不过区域升幅为正式了,齐刷刷的一刀切,毫无美感;其次,当较宽呈现区域呈现较窄图片时,图片现身严重失真,以至失去识别度。行吗,窄屏的标题解决了,宽屏的难点有来了,不领悟那是要闹哪样!不过难点出来了,大家总要想办法去消除啊,那咋做呢?

图片 9

4.2 clear属性的不足

clear属性只对块级成分有效,不过::after等伪成分默许都以内联水平,由此,在骨子里专业中,大家平时使用上面包车型地铁代码来裁撤浮动带来的震慑:

.clear::after{ content: ""; display: table;/*也足以是'block'大概是'list-item'*/ clear: both; }

1
2
3
4
5
.clear::after{
    content: "";
    display: table;/*也可以是'block'或者是'list-item'*/
    clear: both;
}

由于clear:both作用的本来面目是让投机不和float成分在一行展现,并非确实含义上的破除浮动,因而float元素有部分不好的表征照旧存在,表现在:

  • 如果clear:both要素前边的因素正是float成分,则设置margin-top无效;
/* HTML代码 */ &lt;div class="box1"&gt;&lt;/div&gt; &lt;div
class="box2"&gt;&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384b8874186375-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384b8874186375-1" class="crayon-line">
/* HTML代码 */
</div>
<div id="crayon-5b8f69ec384b8874186375-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;box1&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384b8874186375-3" class="crayon-line">
&lt;div class=&quot;box2&quot;&gt;&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .box1 { float: left; width: 100px; height: 60px; padding: 10px; border: 3px solid black; background: url("../../lib/img/mm1.png") center no-repeat; } .box2 { clear: both; margin-top: -20px; border: 3px solid red; padding:10px; width:100px; height: 60px; background: url("../../lib/img/mm2.jpg") center no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在本例中,设置.box2中的margin-top尚无别的的功效,如下图所示:
图片 10

  • clear:both背后的要素依然大概会发生文字环绕现象。
&lt;div class="father"&gt; &lt;div class="float"&gt; &lt;img
src="../../lib/img/mm1.png"&gt; &lt;/div&gt;
&lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
&lt;/div&gt; &lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384bf922765024-1" class="crayon-line">
&lt;div class=&quot;father&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;float&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-3" class="crayon-line">
        &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-4" class="crayon-line crayon-striped-line">
    &lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-5" class="crayon-line">
    &lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-6" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-7" class="crayon-line">
&lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 500px; height: 70px; } .father:after{ content: ''; display: table; clear: both; } .float{ float: left; } .father img { width: 60px; height: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: '';
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

在本例中,设置clean:both来阻拦浮动对前面成分的影响,可是最后的错位效果仍旧时有发生了(能够安装.father的字体大小为0,然后设置p标签的字体大小化解错误的难题)。

图片 11

同理可得,clear:both只好在一定水平上革除浮动的熏陶,要想全面去除浮动成分的熏陶,借助任何的手段——BFC,接着看下文。

复制代码 代码如下:

主题素材陈说

我们先来看下作者想要描述的难点。首先本身希图了三张宽度不一样的图纸,让他们垂直排列在页面中,除了剔除图片本身在笔直方向上发出的间隔,不做任何任何样式管理,这种境况大家平常在博文中时常看看,在写博文的时候日常使用,具体效用请看:图表宽度自适应(1)。简单看下大家的页面结构:

JavaScript

<img src="imgs/560x200.jpg" alt=""><br> <img src="imgs/440x200.jpg" alt=""><br> <img src="imgs/300x200.jpg" alt="">

1
2
3
<img src="imgs/560x200.jpg" alt=""><br>
<img src="imgs/440x200.jpg" alt=""><br>
<img src="imgs/300x200.jpg" alt="">

为了便利查看效果,大家一贯调节浏览器宽度来测量检验。测验效果如下gif图所示:

图片 12

笔者们轻易窥见,在大家转移窗口可视区域的时候,图片宽度并不会跟着变化,以致于在小显示器中大家只好开到图片的一片段,那是无数人所不乐见的,因为那极有比十分的大恐怕会变成重大新闻遗失。那么这些标题如何化解?

}

2.3 块状化

块状化的趣味是,一旦成分float的本性不为none,则其display总结值正是block也许table。比如:

/* JavaScript代码 */ var span = document.createElement('span') document.body.appendChild(span) console.log('1.' + window.getComputedStyle(span).display) // 设置成分左浮动 span.style.cssFloat = 'left' console.log('2.' + window.getComputedStyle(span).display)

1
2
3
4
5
6
7
/* JavaScript代码 */
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = 'left'
console.log('2.' + window.getComputedStyle(span).display)

在调节台北的结果如下:

1.inline 2.block

1
2
1.inline
2.block

不了然大家有未有跟作者同样的难点:既然设置float后,成分就块状化了,那么怎么还能够爆发包裹性的成效啊?回答这几个难题,要求再行解说下块状化的野趣,这里的块状化意思是足以像block成分同样设置宽和高,并非真正的块成分。

由此,未有任何理由出现上面包车型大巴体制组合:

span{ display: block; /* 多余 */ float: left; } span{ float: left; vertical-align: middle; /* 多余 */ }

1
2
3
4
5
6
7
8
span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

你大概感兴趣的稿子:

  • js达成的月宫仙子瀑布流效果代码
  • javascript自适应宽度的瀑布流完成思路
  • 纯js达成瀑布流展现照片(自动适应窗口大小)
  • 剖判瀑布流布局:JS+相对一定的兑现
  • js实现瀑布流的一种简易方法实例分享
  • 原生JS完毕响应式瀑布流布局
  • 原生JavaScript达成瀑布流布局
  • 基于JavaScript完结瀑布流布局
  • 基于JavaScript完毕瀑布流布局(二)
  • 详解javascript实现瀑布流相对式布局

兵来将挡,水来土掩

是难点,总有消除的点子,只是资金财产高低的标题。对于地点那一个标题自个儿考虑了长时间,刚发轫作者想利用width: 百分之百;max-width: 图片宽度; 来处理,不过,作者发掘图片宽度并不联合,max-width要求针对每三个增长幅度去设置,那根本不可行,无疑是自作自受麻烦,因为实在应用中,大家全然无法预言客商将运用多大幅度面包车型地铁图片。所以就像是单从调节图片样式已经找不到怎样消除办法了,可是本身开头关切 width:百分百; 的难点。

笔者们明白,在CSS中,宽度的百分比是是相持于父级容器宽度的。如若大家能有方法调控图片标签的父容器的肥瘦,那难点是或不是就消除了吧?

率先,为了让图片标签有可控的父成分,大家先对代码结构做一丢丢调动:

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

好了,接下去便是怎么调控img-wrap成分的肥瘦的难点了。笔者首先想到的是变化(float),因为大家精通浮动元素的增长幅度是随内容改动的,所以自身先给img-wrap设置了如下样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

唯独,问题又来了,浮动成分会毁掉原有的布局,如若不做扫除浮动管理,会招致后边的剧情紧跟在转移成分之后。所认为了确认保障不影响另外剧情,大家还得在img-wrap外面加三个器皿来支配调换与否:

JavaScript

<div class="row"> <div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300x200.jpg" alt="">
    </div>
</div>

可以吗,现在我们在来走访,被煎熬成什么样体统了,图片宽度自适应(3):

图片 13

哈哈,好疑似本人想要的成效了。不过,作为叁个有一些网瘾的开辟者,固然达到了自个儿想要的成效,但加了那么多层嵌套标签,总让小编以为到倒霉受。于是,笔者继续折腾,终于作者顿觉, display:inline-block 的元素宽度也是随内容退换的,并且图片暗中同意样式恰巧也表现为inline-block的效应,是或不是足以从此处入手吧?

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

布局再一次回归到只有一层嵌套,然则css样式却需求调动一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当笔者,再一次进行测验的时候,欣然自得多了,你们感受下:图形宽度自适应(4)。

末尾,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%; vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3 评论

图片 14

.img-wrap img {

3. float与流体布局

行使float能够经过破坏经常的文书档案流达成CSS环绕,但是却带来了”中度塌陷”的主题材料!可是大家得以使用float破坏平常文书档案流的特点达成部分常用的布局:

  • 文字环绕变身-中间内容居中,左中右布局

直白看例子:

<div class="box"> <a href="javascript:;" class="fl">左青龙</a> <a href="javascript:;" class="fr">右白虎</a> <h3 class="text-center">标题</h3> </div>

1
2
3
4
5
<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.box{ background-color: #f5f5f5; } .fl{ float: left; } .fr{ float: right; } .text-center{ text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

从下图中看出,完结了中间内容居中的左中右布局。

图片 15

  • 文字环绕的衍生-单侧固定
&lt;div class="box"&gt; &lt;a href="javascript:;"
class="fl"&gt;左青龙&lt;/a&gt; &lt;a href="javascript:;"
class="fr"&gt;右白虎&lt;/a&gt; &lt;h3
class="text-center"&gt;标题&lt;/h3&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384a3401669605-1" class="crayon-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-2" class="crayon-line crayon-striped-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fl&quot;&gt;左青龙&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-3" class="crayon-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fr&quot;&gt;右白虎&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-4" class="crayon-line crayon-striped-line">
    &lt;h3 class=&quot;text-center&quot;&gt;标题&lt;/h3&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

.father{ border: 1px solid #444; overflow: hidden; } .father > img { width: 60px; height: 64px; float: left; } .girl { /* 环绕和自适应的界别所在 */ margin-left: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 环绕和自适应的区别所在 */
    margin-left: 70px;
}

和文字环绕效果比较,不同正是.girl多了一个margin-left: 70px,同期图片的增长率设置60px,因而不会生出文字环绕的功力。这里,我们也能够不选拔margin-left,改用border-left或者padding-left都可以达到规定的标准改造content box的尺码,进而达成宽度自适应布局功效。

图片 16

HTML(注意包装涉及,方便js调用)

(大屏时)

1. float介绍

CSS世界中的float属性是一个年间特别漫长的个性,设置了float属性的成分会基于设置的属性值向左可能向右浮动,直到它的外地缘碰着含有框或另三个浮动框的边框截止。设置了float属性的成分会从日常文书档案流中剥离,也便是不占用任何空间,所以文书档案中不以为奇流中的要素表现的就像浮动成分官样文章同样,因而,设置float属性的后会影响大家的页面布局。具体说来即是:让block成分无视float成分,让inline成分像流水同样围绕着float成分落成转移布局

float属性设计的最初的愿景:仅仅是让文字像流水一样环绕浮动元素,就好像下图中显得的一模一样:

图片 17

复制代码 代码如下:

在css中 成分设置宽度为百分比 那么它的增幅是随父成分的上涨的幅度变化的  所以大家给各种图片三个父成分 让父成分的升幅随内容更改

6. 结语

正文是自家读书float属性计算小说,恐怕存在精通正确的地点,招待我们在商议区冲突,教导迷津,大家相互支持,相互升高。

最终,希望本文的内容可以对您对float的知道能够具备协助,多谢阅读。

LESS(less预编译)

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处: 所以我们给每个图片一个父元素 让父元素的宽