0

私のサイトでは、下部近くに「無料アクセス」セクションがあります。理想的には、左側に自由の画像、中央に登録フォーム、右側に成功の画像を配置したいと考えています。3 つの要素の幅は、960 ピクセルのコンテナーで合計 840 ピクセルなので、問題にはならないと思います。このために、私は使用しています：

        .signup {
    border-top: 1px solid #333333;
    float:left;
    padding-bottom: 40px;
    padding-top: 40px;
    overflow: auto;
    width: 280px;
}

.signup p {
    padding-bottom: 20px;
}

.signup p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.signup #mc-embedded-subscribe {
    background: #0fddaf;
}

.signup .freedom {
    float: left;
    width: 280px;
}

.signup .success {
    float: right;
    width: 280px;
}

.clear {
    clear:both;
}

そしてHTML。

ご覧のとおり、何かがうまく機能していません。私はこれを長い間見てきましたが、単純なものが欠けているのではないかと心配しています。問題が何であるかについてのアイデアはありますか?

4

5 に答える 5

1

Quick and dirty:

Take the width from .signup, float .form left, and give it 280px width;
or take the width from .signup, and give .form an extra class .freedom. (<div class=' freedom form'> - quite rebellious, eh?)

Ta-da!!

Advice

  1. Learn CSS before you work with it, it will save you time and headaches in the future;
  2. ???
  3. Profit.
于 2012-11-06T15:44:26.907 に答える
0

フローティングしている要素に幅を指定すると、予測どおりに動作するはずです。

于 2012-11-06T14:18:50.797 に答える
0

Float .freedom、.form、.success はすべて残されています。次に、.signup から幅を削除します。

于 2012-11-06T14:35:33.933 に答える
0

各分割の絶対サイズがあるので、それらをすべて左に浮かせて、必要な場所に配置したいサイズを指定することで、必要なものを取得できるはずです。

また、コンテナ divに追加overflow:autoして.signup、フローティング コンテンツがその中にとどまるようにする必要があります。

于 2012-11-06T14:39:31.387 に答える
0

左に自由のイメージ、真ん中にサインアップ、右に成功のイメージが必要です。？？？これを得るには、最初にフリーダム イメージをフロートし、明らかに幅を取って左に歌います。次に、成功の画像を右に浮かせます。

上記の CSS で clear: both; を削除してください。div.clear{clear:both} のような別の div を使用して、すべてのフロートの最後にあるすべてのフロートをクリアします

于 2012-11-06T15:32:56.697 に答える