嗨，欢迎使用Blogger，这是一个自订性相当高的部落格 在写部落格时，会慢慢学会使用语法来排版，所以懂些HTML会很有用 ************************************************************* 问题一与二都是相同的问题，都是如何在同一列插入两张以上图片 　　　文文文文文文文 　　 图 图 　　　文文文文文文文 使用Blogger上传图片时，系统会自动将图片设成区块（block）显示 按下[修改HTML]看一下图片程式码，你会看到以下段落 <img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="图片网址" alt="" id="图片ID" border="0" /> 解答就是：将图片语法中 display:block; 删除就好 延伸注解：一行可以插入几张图片决定於图片宽度总和，如果超过栏宽就会强迫分行 问题3. : 我采用了blogger内建的上传照片，它提供置中、左、右的服务 : 这样我就可以在图片的左右摆文字，例如： : 文文文 : 文文文 图 : 文文文 : 但是这样会有两个麻烦 - 1.文字很容易不对称 : 2.图片下方无法额外加文字注解 一样是在HTML模式下解决，这次我们需要用到<DIV>这个标签 <DIV>可以将里头包夹的内容形成一个区段，整个段落都是它的 Step 1/3 DIV标签的功能 　　　<DIV> 　　　 <IMG SRC="图片网址"> 　　　</DIV> 　　　文文文文文文文文 　　　 --------------- 　　　| 图 | 　　　 --------------- 　　　文文文文文文文文 <DIV>像是隐形的表格一样，将里头的内容用一整段来表示 Step 2/3 图片加上注解 　　　我想你要的效果是像新闻网站一样，照片搭配描述，所以你需要做的是 　　　<DIV> 　　　 <IMG SRC="图片网址"> 　　　 <P>叙述文字</P> 　　　</DIV> 　　　 　　　 　　　文文文文文文文 　　　 ------------ 　　　| 图 | 　　　| 描述 | 　　　 ------------ 　　　文文文文文文文 Step 3/3 设定DIV成浮动格式，让文字环绕在侧 　　　图片标签之所以可以让文字环绕在侧，是因为你选择了让图片置左、置右「漂浮」 　　　这等於向文字表示，「嘿，我一定会靠在这一边，旁边空下来，你可以排版过来」 　　　以上的内容以HTML表示的话就是 　　　 　　　 　　　<IMG SRC="图片网址" ALIGN="*"> 注解：* 可为 LEFT（左）、RIGHT（右） 　　　 　　　在之前就提过DIV的功能是将整个段落占据住，理论上没有元素能够排在同一段落内 　　　但我们可以设定DIV成浮动模式，让它「飘浮」在栏位的一边，这时文字就可以环绕 　　　<DIV STYLE="float:left;"> 注解：left是你想区块浮动的位置 　　　 <IMG SRC="图片网址"> 注解：请将负责图片飘浮位置的ALIGN给删除 　　　 <p>注解描述</p> 　　　</DIV> 　　 　　　文文文文文文文文文文文文 　　　 ---------- 文文文文文 　　　| 图 | 文文文文文 　　　| 注解描述 | 文文文文文 　　　 ---------- 文文文文文 　　　 　　　 ================================= 如果你还有兴趣，有两件事情你可能会想知道 1. 为什麽要去除图片的置放位置 align="*" 因为我们是用区块（DIV）和文字排版，图片仅需要包夹在DIV内 因此，请先将<IMG SRC="图片网址" ALIGN="*">的 ALIGN="*"删除 不然图片会在<DIV>区段内继续浮动在另一个方向 ---------- 文文文文 | | 文文文文 | 图 注解 | 文文文文 | | 文文文文 ---------- 文文文文 文文文文文文文文文文 2.觉得环绕文字和图片（含注解）区块太近，想要留些空隙吗 如果今天只有图片和文字环绕（不含注解），那麽可以用 <img src="图片位置" align="靠齐位置" vspace="水平距离" hspace="垂直距离"> 但今天我们使用<DIV>排版，还是靠样式来设定 <DIV STYLE="float:left;margin:△px ▲px ▽px ▼px;"> 注解：分别控制上右下左 <IMG SRC="图片网址"> <p>注解描述</p> </DIV> 文文文文文文文文文文文文文 △ 文文文文 ---------- 文文文文 | | 文文文文 ▼ | 图 注解 |▲ 文文文文 | | 文文文文 ---------- 文文文文 ▽ 文文文文 文文文文文文文文文文文文文 文文文文文文文文文文文文文 --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 218.169.78.52