css - 如何使用图层定位图形按钮

Question

我有这个页面（下），我想在屏幕截图的右下角（价格右侧）放置一个图形按钮

如何用几行代码做到这一点？

截屏：

代码：

<div class="content-1g">
    <div class="content-1-1g">
        </div>
    <div class="content-1-2g"><p class="none"><%# Eval("TName")%></p>
            <div class="content-1-3g"><p><%# Eval("TDetails")%></p></div>
            <div class="content-1-3g">Adult: £<%# Eval("TPriceadult")%> </div>
            <div class="content-1-3g">Senior/Student: £<%# Eval("TPricesenior")%> </div>
            <div class="content-1-3g">Child: £<%# Eval("TPricechild")%> </div>
    </div>
</div>

CSS：

.content-1g {
    float: left;
    width: 836px;
    padding: 0px 32px 0px 32px;
/*  background-color: White;
    border: 1px solid orange; */
}

.content-1-1g 
{
    float: left;
    width: 269px;
    height: 202px;
    margin:0px 20px 0px 0px;
    padding: 0px;
    background: url('../images/Chinatown-experience-logo.png') no-repeat left top;
}

.content-1-2g {
    float: right;
    /*width: 591px; */
    width: 547px;
    padding: 0px 00px 0px 0px;
    font: 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    color: #FFFF00;
    text-align: justify;
    vertical-align: top;
}

.content-1-3g {
    float: right;
    /*width: 591px; */
    width: 547px;
    padding: 0px 00px 0px 0px;
    font: 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    color: #FFFFFF;
    text-align: justify;
    vertical-align: top;
}

谢谢茶

Answer 1

带有“唐人街”标题的是按钮？

您可以将其绝对定位，并为其设置右值和下值：

position: absolute;
right: 10px;
bottom: 10px;

Answer 2

我认为您需要将产品规格拆分为两个 div 并将它们左右浮动。像这样的东西：

<div class="content-1g">
<div class="content-1-1g">

</div>
<div class="content-1-2g">
    <p class="none"><%# Eval("TName")%></p>
    <div class="content-1-3g"><p><%# Eval("TDetails")%></p></div>
    <div class="content-left">
            <div class="content-1-3g">Adult: £<%# Eval("TPriceadult")%> </div>
            <div class="content-1-3g">Senior/Student: £<%# Eval("TPricesenior")%> </div>
            <div class="content-1-3g">Child: £<%# Eval("TPricechild")%> </div>
    </div>
    <div class="content-right">
        <!-- Your button -->
    </div>
</div>

对于 CSS：

.content-left {
    float: left;
    width: 273px;
}

.content-right {
    float: left;
    width: 273px;
}

在按钮宽度处调整右侧 div 的大小。希望能帮助到你！

Answer 3

将此按钮放在文本的末尾，然后：

.your_button {
    float: right;
    display: block;
    clear: both;
}