小编KGe*_*Gee的帖子

在闪亮的流体行中水平居中图像

是否可以在闪亮的 ui 流体页面中将三张图像放在一行中并将每张图像的宽度固定为 300 像素?要得到:

在此处输入图片说明

我的一个想法是使用 splitLayout 并以某种方式插入图像作为窗口宽度的函数,但我不确定如何实现这一点。我知道您可以使用 splitLayout 将图像设置为窗口的百分比,但是我特别希望中间图像为 300 像素。

fluidPage(fluidRow(
    splitLayout(cellWidths = c("34%", 300, "34%"), cellArgs = list(style = "padding: 0px"), style = "border: 0px; padding: 0px;",
       div(img(src="image1", height=300, width=300, align="right"),
       div(img(src="image2", height=300, width=300, align="center"),
       div(img(src="image3", height=300, width=300, align="left")), ...
Run Code Online (Sandbox Code Playgroud)

所以问题是我得到的图像偏离中心:

在此处输入图片说明

但是当我将中间单元格设置为 33% 时,图像之间的差距太大了。

splitLayout(cellWidths = c("34%", "33%", "34%"), cellArgs = list(style = "padding: 0px"), style = "border: 0px; padding: 0px;",
div(img(src="image1", height=300, width=300, align="right"),
div(img(src="image2", height=300, width=300, align="center"),
div(img(src="image3", height=300, width=300, align="left"))
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

所以我所追求的是cellWidths = c((windowWidth-300)/2, …

user-interface r shiny

3
推荐指数
1
解决办法
4612
查看次数

标签 统计

r ×1

shiny ×1

user-interface ×1