Question

我正在尝试将价格块放入现有的卡盒中。

这是JSFiddle：https://jsfiddle.net/g6bzkjvd/

我的尝试是这个：

.price {
    position: absolute;
    top: -34px;
    left: 0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

我希望橙色块位于左下角，但它不起作用。

能否请您指出我的权利方向？

谢谢。

Answer 1

如果将图片和价格保持在同一div并指定相对位置会更好。我添加了一个类名为.container-div的div并更新了CSS。

container-div{
  position: relative;
}

.price {
    position: absolute;
    bottom:5px;
    right:0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

在您的CSS文件中

<div>
            <asp:TextBox ID="Field1" runat="server"></asp:TextBox>
            <asp:DropDownList ID="Field2" runat="server">
                <asp:ListItem Text="A" Value="A"></asp:ListItem>
                <asp:ListItem Text="B" Value="B"></asp:ListItem>
                <asp:ListItem Text="C" Value="C"></asp:ListItem>
            </asp:DropDownList>
            <asp:CheckBox ID="Field3" runat="server"></asp:CheckBox>
        </div>
        <asp:Button ID="Button1" OnClick="btn_Save" runat="server" Text="Button" />


using (ClientContext clientContext = new ClientContext("http://sp:12001/"))
            {
                clientContext.Credentials = new NetworkCredential("lee","pw","domain");
                Web web = clientContext.Web;
                List oList = clientContext.Web.Lists.GetByTitle("MyList3");
                ListItemCreationInformation itemCreateInfo = new ListItemCreationInformation();
                Microsoft.SharePoint.Client.ListItem oListItem = oList.AddItem(itemCreateInfo);
                oListItem["Title"] = Field1.Text;
                oListItem["Field2"] = Field2.SelectedItem.Value;
                oListItem["Field3"] = Field3.Checked;
                oListItem.Update();

                clientContext.ExecuteQuery();
            }

我已经更新了您的小提琴here

Answer 2

将top的值更改为bottom或顶部：139像素；像这样

.price {
    position: absolute;
    bottom: 234px;
    left: 0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

https://jsfiddle.net/viethien/0achp39n/6/

如果要在图像更改高度时保持位置不变，请为该图像和价格文本添加包裹的div，如下所示 https://jsfiddle.net/viethien/0achp39n/13/

将图片的div左下角与CSS对齐

2 个答案: