秀米成熟了，这一次布局的宽度变得更高级了呢！

从下图看出，版式是用基础的多列布局划分成两块，左边布局宽度67%，右边布局宽度32%，标题文字用了自适应布局，方便内容自动调整宽度；小贴图放在固定布局，可以设置背景图被包含选项，可以让小贴图被固定住，不会“跑掉”。

看到这里，你或许又要问，既然都是布局，直接用基础布局做不很好吗？可以，现在 秀米布局的宽度能够设定多种属性，常用的百分比、固定布局的宽度固定像素、自适应布局的自适应，还有一种神奇的自伸缩属性，都可以在同一个布局里实现的哦。

秀米布局宽度可设置四种不同属性

秀米布局宽度可设置百分比、固定像素、自适应与自伸缩四种宽度类型，并且在同一个布局里可自由切换。

我们添加一个基础布局到编辑区域，在布局工具条设置宽度的右边，有一个三角按钮，点击他可以看到四种宽度属性。同样的，如果我们添加的是一个特殊布局，比如固定布局，也可以设置四种不同宽度属性。

这四种布局宽度类型，百分比是我们常用到的一种布局类型，输入数值就可以调整布局宽度。这里就不赘述了，直接介绍后三种宽度类型：

布局宽度设置固定像素

布局宽度设置固定像素后，当前布局宽度被固定，添加内容到里面，布局的宽度来决定内容的宽度。这种很适合添加一些小贴图作为装饰，或是一些小零件元素。

布局宽度设置自适应

布局宽度设置自适应类型，会根据内容自动调整宽度，我们可以把它看做一个“自适应布局”。这种宽度类型适合制作标题，标题长，布局就长。

这里我们可以在之前的固定像素宽度布局左侧增加一列，设置它的宽度为自适应属性，然后输入文字。我们可以看出内容增加的同时，左侧布局宽度也自动调整宽度。

布局宽度设置自伸缩

布局自伸缩宽度类型，在多列布局中更为实用，它与普通多列布局类似，区别在于它可以解决普通多列布局总宽度不够，会发生布局折行的问题，同时这也是其他三个宽度属性所没有的特性。

以前面我们所做的标题模板为例，当我添加更多文字时，右边布局它就被挤到了第二行去。

当我把左边布局宽度改成自伸缩属性时，被折到第二行的贴图布局又回到了原来位置，与此同时，左边布局中很长一段的文字自己会自动调整宽度。

另外，在同一行里面，如果有多个“自伸缩”的布局，它们会按照“伸缩比”来决定如何分配宽度。例如我们提供的示例中，左边布局A的伸缩比是100，右边布局B伸缩比是20，那么布局A占100/120，布局B占20/120。

宽度多种类型实际结合应用

了解了布局四种宽度类型，在实际制作内容时，我们可以考虑将它们结合起来应用。

例如，将固定像素与自伸缩宽度结合，制作一个左中右的标题布局，左右两边是固定的布局，中间是一个自伸缩的固定布局，这样无论中间的内容多长，左右两边的布局都不会折行。但这样做之后，中间的自伸缩布局初始宽度会很宽，那我们可以在整个外面用一个自适应布局框住，就好啦。

方知人在路途不孤独

固定像素+自伸缩版式示例

2019/12/7 Major Snow

自适应+自伸缩版式示例

最后我们再来巩固一下

秀米的布局宽度，现可以设置四种不同属性：百分比、固定像素、自适应和自伸缩，这四种宽度属性可以自由切换，且在同一行多列布局中可以设置多个不同宽度属性。

每一天的秀米都有新的惊喜

每一天的小编都想要小发发返回搜狐，查看更多