免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: 不用table 如何在并列图片下加上说明 [打印本頁]
作者: rainbow    時間: 2020-10-27 11:50     標題: 不用table 如何在并列图片下加上说明

本帖最後由 rainbow 於 2022-10-23 10:22 編輯

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


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


图片（一）

载阳茶馆外墙
贴满民国时期的海报
图片（二）

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


作者: rainbow    時間: 2020-10-27 12:00

本帖最後由 rainbow 於 2020-10-27 15:50 編輯

并列图片加说明的代码:

  1. <center>
  2. <div style="width:740px;FONT: bold 24px/140% kaiti; COLOR: #cc0033;letter-spacing:-1px">
  3. <section style="display: flex;justify-content: space-between;align-items: center">
  4. <section style="box-sizing: border-box;">图片（一）<br>
  5. <img src="图片（一）网址" width=360><br>图片（一）的说明词
  6. </section><!--左图-->
  7. <section style="box-sizing: border-box;">图片（二）<br>
  8. <img src="图片（二）网址" width=360><br>图片（二）的说明词
  9. </section><!--右图-->
  10. </section>
  11. </div></center><br><br>
複製代碼



作者: rainbow    時間: 2020-10-27 19:05

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

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



武汉 美女 加油


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

……

    




伏明霞


李娜



孟锦云


叶枫


作者: rainbow    時間: 2020-10-27 19:24

本帖最後由 rainbow 於 2020-10-27 19:57 編輯

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


<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">武汉&emsp;美女&emsp;加油</span></p><BR>
<p style="padding-left:30px; padding-right:30px" align=left><span style="FONT: bold 24px/140% 仿宋; COLOR: #800080">&emsp;&emsp;一场新冠状肺炎疫情，武汉市吸引了全世界每个人的眼球。<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">&emsp;<img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif">&emsp;<img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif">&emsp;<img src="http://boanson.e-hosting.com.hk/cyw/kuru12.gif">&emsp;<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    時間: 2020-10-28 13:11

本帖最後由 rainbow 於 2020-10-28 13:29 編輯
三图并排加说明文字

图片一

图片二


图片三


代码：
  1. <center>
  2. <div style="width:800px;" align=center>
  3. <section style="text-align:center; margin: 10px 0px 0px;">
  4. <section style="background-color:#fff1e1;padding:13px 13px 13px;margin:18px 0px 0px;border-radius:30px">
  5. <section style="display: flex; justify-content: space-between; FONT: bold 28px/140% kaiti; COLOR: #814a4a;letter-spacing:-1px">
  6. <section style="width:32%;" data-width="32%">
  7. <img referrerpolicy="no-referrer" src="http://imgs.cloud/images/2020/10/28/2_roses.gif" width=200>
  8. <br>图片一</section>
  9. <section style="width:32%;" data-width="32%">
  10. <img referrerpolicy="no-referrer" src="http://imgs.cloud/images/2020/10/28/2_roses.gif" width=200 />
  11. <br>图片二</p>
  12. </section>
  13. <section style="width:32%;" data-width="32%">
  14. <img referrerpolicy="no-referrer" src="http://imgs.cloud/images/2020/10/28/2_roses.gif" width=200>
  15. <br>图片三</section>
  16. </section></section></section>
  17. </div></center>
複製代碼


作者: rainbow    時間: 2020-10-29 11:05

本帖最後由 rainbow 於 2020-10-29 15:13 編輯
并列三圆图加阴影
2_roses.gif
2_roses.gif
2_roses.gif
图片一
图片二
图片三
代码：
  1. <center>
  2. <span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #ff0080; text-shadow: 3px 3px 3px #003399; letter-spacing:2px">并列三圆图加阴影</span><br>
  3. <div style="width:780px;height:310px; background-color:#fff1e1;padding:5px;border-radius:30px;margin:20px 0px 30px 0px; overflow:hidden" align=center><!--背景-->
  4. <section style="margin: 10px 0px; text-align: center;"><!--并排三原图开始-->
  5. <section style="display: flex; justify-content: center; align-items:center;">
  6. <section style="width: 240px; height: 240px; border-radius: 100%; overflow: hidden;box-shadow:0px 3px 3px #95b5f1;">
  7. <section style="width:240px;height:240px;"><img referrerpolicy="no-referrer" style="display: block; width: 240px;height: auto;" src="http://imgs.cloud/images/2020/10/28/2_roses.gif" width=240 alt="2_roses.gif"></section>
  8. </section>
  9. <section style="margin-left:10px;width: 240px; height: 240px; border-radius: 100%; overflow: hidden;box-shadow:0px 3px 3px #95b5f1;">
  10. <section style="width:240px;height:240px;"><img referrerpolicy="no-referrer" style="display: block; width: 240px;height: auto;" src="http://imgs.cloud/images/2020/10/28/2_roses.gif" width=240 alt="2_roses.gif"></section>
  11. </section>
  12. <section style="margin-left:10px;width: 240px; height: 240px; border-radius: 100%; overflow: hidden;box-shadow:0px 3px 3px #95b5f1;">
  13. <section style="width:240px;height:240px;"><img referrerpolicy="no-referrer" style="display: block; width: 240px;height: auto;" src="http://imgs.cloud/images/2020/10/28/2_roses.gif" width=240 alt="2_roses.gif"></section>
  14. </section>
  15. </section></section>
  16. <!--下面是每个图片的文字说明部分-->
  17. <section style="display: flex; justify-content: center; align-items:center;FONT: bold 28px/140% kaiti; COLOR: #814a4a;letter-spacing:-1px">
  18. <section style="width:240px;height:30px;">图片一</section>
  19. <section style="width:240px;height:30px;">图片二</section>
  20. <section style="width:240px;height:30px;">图片三</section></section>
  21. </div>
  22. </center>
複製代碼
作者: 丁发    時間: 2020-10-29 12:50

    提起代码，我就头痛。密密麻麻，到底是指什么的。感谢 RAINBOW 她花了大量时间和尽力，时不时在网上为（如我者）不少盲 CODE 网友耐心讲解、指导、示范。如此这般，使我总于皮浅知道代码到底是怎么回事。这次 RAINBOW 又将简易的张贴并列照片的代码公布分享于此。我觉得非常实用，我试了数次，得益匪浅。谨此向她致谢。谢谢你 RAINBOW ！。
   

作者: rainbow    時間: 2020-10-30 19:05

本帖最後由 rainbow 於 2020-10-30 19:06 編輯
左文右图并排

重阳节

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



  1. <center>
  2. <span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #ff0080; text-shadow: 3px 3px 3px #003399; letter-spacing:2px">左文右图并排</span><br>
  3. <div style="width:800px" align=center>
  4. <section style="margin:10px 0px;">
  5. <section style="background-color:#acb5e0;border-radius:30px; border:6px #0069ae double">
  6. <section style="display: flex; justify-content: space-between; align-items:center;">
  7. <section style="width:55%;margin-top:0px;padding:10px;"><!--左侧文字开始-->
  8. <p align=center>
  9. <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>
  10. <section style="margin-top:10px;">
  11. <p style="padding-left:30px; padding-right:30px" align=left>
  12. <span style="FONT: normal 24px/140% Microsoft YaHei; COLOR: #003399">&emsp;&emsp;农历九月初九是重阳节。重阳节，又称踏秋，是汉族传统节日。庆祝重阳节一般包括出游赏景、登高远眺、观赏菊花、插茱萸、吃重阳糕、饮菊花酒等活动。
  13. </span></p>
  14. </section>
  15. </section>
  16. <section style="width:45%;padding:10px;margin:10px"><!--右侧图片开始-->
  17. <img referrerpolicy="no-referrer" src="https://2img.net/h/i.postimg.cc/kXdGvM9T/orange-rose.gif" style="display: block; width: 300px; height: auto;" alt=""/>
  18. </section>
  19. </section>
  20. </section>
  21. </section>
  22. </div>
  23. </center>
複製代碼
作者: rainbow    時間: 2020-10-30 19:07

本帖最後由 rainbow 於 2020-10-31 22:17 編輯
左图右文并排
orange-rose.gif

重阳节

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



  1. <center>
  2. <span style="FONT: bold 60px/120% Microsoft YaHei; COLOR: #ff0080; text-shadow: 3px 3px 3px #003399; letter-spacing:2px">左图右文并排</span><br>
  3. <div style="background-color:#fff1e1;width:800px;border-radius:30px" align=center>
  4. <section style="margin: 10px 0px; text-align: center;">
  5. <section style="display: flex; justify-content: space-between; align-items:center;">
  6. <section style="border:dashed 3px #cc0033;margin:25px;border-radius:15px"><!--左侧图片开始-->
  7. <section style="width: 220px; height: 220px; border-radius: 100%; overflow: hidden;margin:0px auto;">
  8. <section style="width:220px;height:220px;">
  9. <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"/>
  10. </section>
  11. </section>
  12. </section><!--左侧图片结束-->
  13. <section style="margin:0px 15px 0px;"><!--右侧文字开始-->
  14. <p align=center>
  15. <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>
  16. <p style="padding-left:30px; padding-right:30px" align=left>
  17. <span style="FONT: normal 24px/140% Microsoft YaHei; COLOR: #cc0033">&emsp;&emsp;农历九月初九是重阳节。重阳节，又称踏秋，是汉族传统节日。庆祝重阳节一般包括出游赏景、登高远眺、观赏菊花、插茱萸、吃重阳糕、饮菊花酒等活动。
  18. </span></p>
  19. </section><!--右侧文字结束-->
  20. </section>
  21. </section>
  22. </div></center>
複製代碼




歡迎光臨 老校友 (http://boanson.orzweb.net/) Powered by Discuz! 7.2