利用浮动版式对齐元素

利用浮动版式,您可以对齐元素,使它们能够针对不同的页面尺寸和方向自动调整对齐方式和比例。自适应文档特别适合使用浮动版式,但浮动版式也可以与固定尺寸的元素配合使用。

您可以在 Google Web Designer 中使用不同的技术来构建浮动版式:

Flexbox (Fluid Layout) - Google Web Designer

百分比值

您可按百分比(而非像素)来设置尺寸和位置,以便与相应元素保持一定的比例并使元素之间保持相对的对齐关系。

若要使用百分比值(而非像素),请在“属性”面板中点击字段内的 px,然后从下拉列表中选择 %

要想将所有位置和尺寸值都转换为百分比值,请点击使用百分比值 按钮。

您可以在文档中混用百分比值和像素值。

定位

定位功能可让您永久对齐容器内的元素,即使元素或容器的尺寸、内边距或边框宽度发生变化也不例外。您设置的任何位置或平移属性都将使元素相对于定位点产生偏移。

您可以选择水平定位模式和垂直定位模式。默认值为“左上角”。

水平定位模式

模式 效果
左侧 元素的左边缘与容器的左边缘对齐。
居中 元素的水平中心与容器的水平中心对齐。
右侧 元素的右边缘与容器的右边缘对齐。

垂直定位模式

模式 效果
顶部 元素的上边缘与容器的上边缘对齐。
中间 元素的垂直中心与容器的垂直中心对齐。
底部 元素的下边缘与容器的下边缘对齐。

当“选择工具” 处于活动状态时,您可以在“属性”面板或工具选项栏中设置定位模式。

Flexbox

Flexbox (CSS Flexible Box Layout Module) 是一种将容器中的内容灵活地排列为行或列的方式。每项内容都可以放大或缩小,以便在保持指定顺序和间距的同时优化容器空间。

您可以在“自适应”面板的 Flexbox 标签页中使用 Flexbox 并配置 Flexbox 属性。详细了解如何使用 Flexbox

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
主菜单
3467495079481397458
true
搜索支持中心
true
true
true
true
true
5050422
false
false