如何将 div 放在 JSON 中的 div 下?

时间:2021-07-01 21:41:56

标签: css json sharepoint

我在 SharePoint 中工作,可以选择使用 JSON 配置列表。 我想要 3 个 div。

  1. 一张图片 (50x50)
  2. 标题(占据行的其余部分)
  3. 在图像/标题行下,我想放置一个带有按钮的 div。

但我一直在...

enter image description here

我的 json 代码如下...

    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Group",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden",
                "border": "1px solid green",
                "position": "relative"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "='Details for document: ' + [$Title]"
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "width": "auto",
                "float": "left",
                "border": "1px solid red"
            },
            "children": [
                {
                    "elmType": "button",
                    "txtContent": "Create a New PR"
                }
            ]
        }
    ]
}```

0 个答案:

没有答案
相关问题