0

テンプレートを使用してWPに取り組んでおり、ボタンをメインコンテナの外に浮かせようとしています。ここにすでに投稿されているいくつかの質問を調べましたが、うまくいきませんでした。

パディング、マージン、オーバーフローなどを試してみました。うまくいくように見えるのは、負のマージンを設定することですが、その場合、div はメイン コンテナーによって隠されます。

HTMLは次のとおりです。

<div class="purchase_options_meta clearfix">
                    <div class="purchase_options">
                       <div id="deal_attributes_wrap" class="section ">                                
                        </div>
                           <div class="buy_button gb_ff font_x_large">                                
                        </div>

                    </div>
 </div>

そして、これが私が使用しているCSSです：

    .container.main {
    width: 980px;
    padding: 20px;
    overflow: visible;
    }

    .purchase_options {
    position: relative;
    }

    .buy_button {
    position: absolute;
    background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button12.png) no-repeat center;
    color: white;
    height: 100px;
    width: 375px;
    left: -54px;
    top: -16px;
    }

    .button {
    background-color: transparent;
    color: #ffffff;
    }

    .button:hover {
    background-color: transparent;
    color: #cccccc;
    }

    .buy_button a {
    font-weight: bold;
    font-size: 29px;
    font-family: arial;
    padding: 12px;
    display: block;
    white-space: nowrap;
    position: relative;
    margin: 15px 0 0 50px;
    }   

    .buy_button a span {
    position: absolute;
    right: 33px;
    padding: 0 5px;
    }

そして、ここにページへのリンクがあります。私の問題は、左側の一番上の赤いボタンにあります。

どんな助けでも大歓迎です！

4

1 に答える 1

0

それが将来誰かを助ける場合に備えて：

コードに CSS のこの部分を追加する必要がありました。

#deal_single.clearfix:after {
    clear: both !important;
}

より具体的に言うと、「#deal_single」はページ ID です。

于 2013-01-05T06:18:39.040 に答える