0

このページ (下) があり、スクリーンショットの右下 (価格の右) にグラフィカルなボタンを配置したい

数行のコードでこれを行うにはどうすればよいですか?

スクリーンショット:

ここに画像の説明を入力

コード：

<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;
}

ありがとうお茶

4

3 に答える 3

0

「チャイナタウン」のキャプションがあるのはボタン？

絶対に配置し、右と下の値を設定できます。

position: absolute;
right: 10px;
bottom: 10px;
于 2012-11-29T14:36:55.317 に答える
0

製品仕様を 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 のサイズを変更します。それが役に立てば幸い！

于 2012-11-29T14:39:16.660 に答える
0

このボタンをテキストの最後に配置してから、次のようにします。

.your_button {
    float: right;
    display: block;
    clear: both;
}
于 2012-11-29T14:43:17.663 に答える