圖文排版
H5秀
手機圖文
實現圖片並列
其實在秀米裡面真的是非常簡單的操作
熟悉秀米的小夥伴應該都知道
秀米有一個功能叫做「布局」吧
哦！所以呢！然後呢！
我們通常形容布局就像是衣櫃的隔層
每個隔層裡面可以放進去不同的東西
那其實圖片並列
就和往衣櫃相鄰隔層裡面放東西的道理是一樣的
衣櫃有多個隔層
秀米也有多列布局
而圖片並列
就與多列布局有著密不可分的聯繫
聽起來有點意思嘞！
今天就來講一講
如何用多列布局實現圖片並列
以及一些你可能知道但沒有引起重視的小知識點
以下為正文內容
請仔細用心細品
首先，大家需要記住一句話：想要幾個內容並列就用幾列布局。比如實現下方這樣的三張圖片並列，就需要用一個三列布局。
那以三張圖片並列為例，具體該如何操作呢？繼續往下看吧！
如何實現3張圖片並列
我們先在編輯區域左側的圖文模板布局基礎布局標籤裡面找到三列布局，添加到編輯區域中，然後再把圖片依次放進每個布局裡面：
此時如果預覽會發現圖片之間沒有間距，是連在一起的：
之前我們在文章《有一種距離叫——排版的間距！》中講過像類似的情況，應該調節布局工具條上的「間距」：分別選中每一列布局，在布局工具條上面的「間距」裡面設置左間距、右間距各為5即可（具體間距數值根據實際情況來調整）。
這樣三張圖片並列的效果就做出來啦~是不是很簡單~如果你想要4張、5張、6張……圖片並列或者是圖片+文字並列，其實方法都是差不多的。
但是你們發現了嗎？基礎布局分類裡面的多列布局最多只有5列哦~那如果想要做6圖並列咋辦呢？或者想要刪除列數？
如何新增/刪除布局列數
其實布局是可以增加/刪除列數的，選中布局，在布局工具條上寬度左側有一個圖標，點它可以刪除列、插入列：
不過，有的時候新增列之後，布局會出現折行的情況，這又是為什麼呢？
其實是因為所有列的布局寬度百分比之和超過了100%，那該如何讓布局不折行呢？此時就需要調整布局每列的寬度並遵循一個原則：不管布局有幾列，一定要保證所有列的布局寬度百分比之和要≤100%。
如何調整布局寬度
選中每一列布局，然後在布局工具條上面有一個寬度設置：
既然說到了布局寬度，接下來就講一下如何讓圖片保持比例一致，因為與布局寬度有一丟丟的關係。
如何保證圖片比例一致
想要保證圖片的比例一致，一定要注意「三個統一」：圖片尺寸統一、圖片寬度統一、圖片所在布局寬度統一。
1、圖片尺寸統一
圖片尺寸統一是指圖片的長x寬要統一，有兩種方法可以實現：直接在本地把圖片裁剪成一樣的尺寸，然後再上傳到秀米圖庫；先上傳到秀米圖庫，然後添加到編輯區域，選中圖片，用圖片工具條上的「裁剪」功能裁剪成一樣的尺寸。
秀米的圖片裁剪功能
2、圖片寬度統一
圖片寬度統一是指在秀米編輯區域裡面的圖片，選中圖片之後，圖片工具條上面的寬度百分比要統一。
如果圖片尺寸統一但是圖片工具條上的寬度百分比不統一的話，也會出現圖片比例不一樣的情況。
3、圖片所在的布局寬度統一
如果你的圖片是放在一個布局裡面的，那在保持圖片比例統一的時候除了前面提到的兩點，還有一點就是要注意圖片所在的布局寬度統一。
因為布局寬度如果不統一，即使放進去的圖片寬度和尺寸都統一了，也會出現比例不一樣的情況。比如下圖所示：圖片尺寸和寬度都是統一的，但左列布局寬度40%，右列布局寬度60%。
另外，在排版的時候想讓圖片變大變小，其實上面的方法2和方法3都是可以實現的：改變圖片寬度、改變圖片所在的布局寬度。
小結
想要實現圖片並列排版，要用多列布局，然後布局可以新增列也可以刪減列。此時需要注意：不管布局有幾列，一定要保證所有列的布局寬度百分比之和要≤100%。
另外，想要圖片保持比例一致需要注意：圖片尺寸統一、圖片寬度統一、圖片所在的布局寬度統一。
哇哦~
你居然看到這裡了
那點個「在看」再走吧
更多閱讀