不用table 如何在并列&#22270;片下加上&#35828;明

華中天地論壇 » 電腦知識 » 常用電腦程式 » 不用table 如何在并列图片下加上说明

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-27 12:09
14.199.140.108

分享私人訊息

不用table 如何在并列图片下加上说明

过去要做到如下图所示的图文排版的话，非用table不可，否则说明词无法打在左右各自图片下面。此帖的组合信纸，以往也只能用table制作，代码较为复杂，现在抛弃table这个框框，全改用 section 排版，代码更为简单易看，同一个代码只要改变宽度参数，就可以制作出适用于不同论坛的各种宽度的帖子，真是方便得多。

图片（一）

载阳茶馆外墙
贴满民国时期的海报

图片（二）

走出载阳茶馆
去著名的潮州牌坊街

[ 本帖最後由 rainbow 於 2020-10-31 13:40 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-27 12:11
14.199.140.108

私人訊息

并列图片加说明的代码:
<center>
<div style="width:740px;FONT: bold 24px/140% kaiti; COLOR: #cc0033;letter-spacing:-1px">
<section style="display: flex;justify-content: space-between;align-items: center">
<section style="box-sizing: border-box;">图片（一）<br>
<img src="图片网址" width=360><br>图片（一）的说明词
</section>
<section style="box-sizing: border-box;">图片（二）<br>
<img src="图片网址" width=360><br>图片（一）的说明词
</section>
</section>
</div></center><br><br>

[ 本帖最後由 rainbow 於 2020-10-27 16:34 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-27 22:12
14.199.140.108

私人訊息

以下是把丁发于2020-2-24发表的帖子《武汉美女加油》的代码全部改用section排版后的效果，两张并排图片下的说明，可置于各图片的下面了，比以前只能把文字打在两张图片的中间位置更好些，不用再写上左图右图了。（旧代码全用table排版)

武汉美女加油

一场新冠状肺炎疫情，武汉市吸引了全世界每个人的眼球。

……

伏明霞

李娜

孟锦云

叶枫

[ 本帖最後由 rainbow 於 2020-10-29 15:20 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-27 22:13
14.199.140.108

私人訊息

代码：（下面的红色和蓝色字为并排图片的代码，其他是信纸代码。）

<center>
<div style="width:800px; background-color:#d0ebfe">

<section style="background-image:url('https://www.z4a.net/images/2020/02/24/21100203667.jpg');background-color:#d0ebfe; background-position:top;background-repeat:repeat-x;background-size:contain;color:#FACEFB;width:800px;height:130px">
<section style="display: flex;justify-content: space-between;align-items: center">
<section style="box-sizing: border-box;">
<img src="https://www.z4a.net/images/2020/02/24/21100118701.jpg" height=130>
</section>
<section style="box-sizing: border-box;">
<img src="https://www.z4a.net/images/2020/02/24/21100326504.jpg" height=130>
</section>
</section>
</section>


<section style="margin-top:-10px; background-color:#d0ebfe; background-position:top;background-repeat:repeat-x;background-size:contain;color:#005500;width:800px;"><br>

<p align=center><span style="FONT: bold 50px/140% Microsoft YaHei; COLOR: #800080; text-shadow: 2px 2px 2px #800000; letter-spacing:0px">武汉美女加油</span></p><BR>
<p style="padding-left:30px; padding-right:30px" align=left><span style="FONT: bold 24px/140% 仿宋; COLOR: #800080"> 一场新冠状肺炎疫情，武汉市吸引了全世界每个人的眼球。<br><br>
……</span></p>
<p align=center><span style="FONT: bold 24px/140% 仿宋; COLOR: #800080"><img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif"> <img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif"> <img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif"> <img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif"> <img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif"></span></p><br>
<center>
<div style="width:700px;FONT: bold 24px/140% kaiti; COLOR: #cc0033;letter-spacing:-1px">
<section style="display: flex;justify-content: space-between;align-items: center">
<section style="box-sizing: border-box;"><br>
<img src="https://s2.ax1x.com/2020/02/24/38jSTe.jpg" height=500><br>伏明霞
</section>
<section style="box-sizing: border-box;"><br>
<img src="https://s2.ax1x.com/2020/02/24/38XxeO.jpg" height=500><br>李娜
</section>
</section>
</div>
<br>
<div style="width:740px;FONT: bold 24px/140% kaiti; COLOR: #cc0033;letter-spacing:-1px">
<section style="display: flex;justify-content: space-between;align-items: center">
<section style="box-sizing: border-box;"><br>
<img src="https://s2.ax1x.com/2020/02/24/38XXy6.jpg" height=500><br>孟锦云
</section>
<section style="box-sizing: border-box;"><br>
<img src="https://s2.ax1x.com/2020/02/24/38XxeO.jpg" height=500><br>叶枫
</section>
</section>
</div>
</center>

</section>


<section style="background-image:url('https://www.z4a.net/images/2020/02/24/21095928863.jpg');background-color:#d0ebfe; background-position:left bottom;background-repeat:repeat-x;background-size:contain;color:#FACEFB;width:800px;height:150px">
<section style="display: flex;justify-content: space-between;align-items: center">
<section style="box-sizing: border-box;">
<img src="https://www.z4a.net/images/2020/02/24/21100028914.gif" height=150>
</section>
<section style="box-sizing: border-box;">
<img src="https://www.z4a.net/images/2020/02/24/21100244123.jpg" height=150>
</section>
</section>
</section>
</div></center><br><br>

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-28 13:34
14.199.140.108

私人訊息

三图并排加说明文字

图片一

图片二

图片三

代码：

[Copy to clipboard]

CODE:

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-29 12:54
14.199.140.108

私人訊息

并列三圆图加阴影

图片一

图片二

图片三

[ 本帖最後由 rainbow 於 2020-10-29 15:23 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-30 19:11
14.199.140.108

私人訊息

左文右图并排

重阳节

农历九月初九是重阳节。重阳节，又称踏秋，是汉族传统节日。庆祝重阳节一般包括出游赏景、登高远眺、观赏菊花、插茱萸、吃重阳糕、饮菊花酒等活动。

[Copy to clipboard]

CODE:

<center> <span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #ff0080; text-shadow: 3px 3px 3px #003399; letter-spacing:2px">左文右图并排</span><br> <div style="width:800px" align=center> <section style="margin:10px 0px;"> <section style="background-color:#acb5e0;border-radius:30px; border:6px #0069ae double"> <section style="display: flex; justify-content: space-between; align-items:center;"> <section style="width:55%;margin-top:0px;padding:10px;"> <p align=center> <span style="FONT: bold 60px/140% Microsoft YaHei; COLOR: #ffffff;text-shadow: #0069ae 1px 1px 0px, #0069ae 1px -1px 0px, #0069ae -1px 1px 0px, #0069ae -1px -1px 0px, #0069ae 0px 1.4px 0px, #0069ae 0px -1.4px 0px, #0069ae -1.4px 0px 0px, #0069ae 1.4px 0px 0px, #0069ae 0px 2px 0px, #0069ae 0px 3px 0px, #0069ae 0px 1px 0px, #0069ae 0px 3px 0px, #0069ae 0px 1px 0px, #0069ae 0px 3.4px 0px, #0069ae 0px 0.6px 0px, #0069ae 0px 2px 0px, #0069ae 0px 2px 0px; letter-spacing:20px">重阳节</span></p> <section style="margin-top:10px;"> <p style="padding-left:30px; padding-right:30px" align=left> <span style="FONT: normal 24px/140% Microsoft YaHei; COLOR: #003399">&emsp;&emsp;农历九月初九是重阳节。重阳节，又称踏秋，是汉族传统节日。庆祝重阳节一般包括出游赏景、登高远眺、观赏菊花、插茱萸、吃重阳糕、饮菊花酒等活动。 </span></p> </section> </section> <section style="width:45%;padding:10px;margin:10px"> <img referrerpolicy="no-referrer" src="https://2img.net/h/i.postimg.cc/kXdGvM9T/orange-rose.gif" style="display: block; width: 300px; height: auto;" alt=""/> </section> </section> </section> </section> </div> </center>

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3951

發表於 2020-10-30 19:11
14.199.140.108

私人訊息

左图右文并排

重阳节

[Copy to clipboard]

CODE:

<center> <span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #ff0080; text-shadow: 3px 3px 3px #003399; letter-spacing:2px">左图右文并排</span><br> <div style="background-color:#fff1e1;width:800px;border-radius:30px" align=center> <section style="margin: 10px 0px; text-align: center;"> <section style="display: flex; justify-content: space-between; align-items:center;"> <section style="border:dashed 3px #cc0033;margin:25px;border-radius:15px"> <section style="width: 220px; height: 220px; border-radius: 100%; overflow: hidden;margin:0px auto;"> <section style="width:220px;height:220px;"> <img referrerpolicy="no-referrer" style="display: block; width: 100%; height: auto;" src="https://2img.net/h/i.postimg.cc/kXdGvM9T/orange-rose.gif" data-width="100%" alt="orange-rose.gif"/> </section> </section> </section> <section style="margin:0px 15px 0px;"> <p align=center> <span style="FONT: bold 60px/140% Microsoft YaHei; COLOR: #ffffff;text-shadow: #cc0033 1px 1px 0px, #cc0033 1px -1px 0px, #cc0033 -1px 1px 0px, #cc0033 -1px -1px 0px, #cc0033 0px 1.4px 0px, #cc0033 0px -1.4px 0px, #cc0033 -1.4px 0px 0px, #cc0033 1.4px 0px 0px, #cc0033 0px 2px 0px, #cc0033 0px 3px 0px, #cc0033 0px 1px 0px, #cc0033 0px 3px 0px, #cc0033 0px 1px 0px, #cc0033 0px 3.4px 0px, #cc0033 0px 0.6px 0px, #cc0033 0px 2px 0px, #cc0033 0px 2px 0px; letter-spacing:20px">重阳节</span></p> <p style="padding-left:30px; padding-right:30px" align=left> <span style="FONT: normal 24px/140% Microsoft YaHei; COLOR: #cc0033">&emsp;&emsp;农历九月初九是重阳节。重阳节，又称踏秋，是汉族传统节日。庆祝重阳节一般包括出游赏景、登高远眺、观赏菊花、插茱萸、吃重阳糕、饮菊花酒等活动。 </span></p> </section> </section> </section> </div></center>

[ 本帖最後由 rainbow 於 2020-10-31 22:19 編輯 ]