0

これらの div をサイトごとに並べようとしていますが、できません。どうすればいいのですか？

    <center>

    <div class="lgsn">

        <div class="login"></div>


        <div class="signup"></div>

    </div>

<center>

とCSS

.lgsn
{
    width: 100%;
    height: 100%; 
    position: fixed;
}

.login, .signup
{
    background-color: #000;
    width: 450px;
    height: 350px; 
    border-radius: 4px; 
    opacity: 0.50; 
}
4

2 に答える 2

1

float:left|right|none|inherit;動作しますが、注意が必要です。clear:both|left|right|none|inherit;属性と一緒に使用しないと面倒です。

于 2012-09-05T01:21:04.850 に答える
0

考慮すべき点がいくつかあります。

  1. centerそのタグを取り除くことをお勧めします。それは減価償却されており、分離ルールに反しています (シンプルにしてください... マークアップのセマンティクスと意思決定、CSS のスタイル、色、フォント)。center タグの代わりにtext-align: center;、CSS 側の宣言として使用する必要があります。テキストをその親の中央に配置することを忘れないでください。そのtext-align: center;ため、親が表示されている場合inline、そのソリューションはテキストを中央に配置しますが、その効果は目立ちません。つまり、表示されたblock親のテキストを中央に配置するには、 を使用しますtext-align: center;。表示された要素の全体を中央に配置するにはdiv(注:テキストではなくdivを中央に配置)、次を使用します。blockmargin: 0 auto;.
  2. block表示された要素を取得して並べて表示する方法には、いくつかのオプションがあります。ほとんどの場合、最適なオプションは a を使用するfloatことです (別の便利なオプションは ですdisplay: inline-block)。習得された使用法は、雑誌や新聞で見られるように画像をフロートして、テキストを画像の周りにラップすることであるため、最初は明白に思えないかもしれませんが、フローティング divは、 1 つの div を別の div にラップするのに機能します。の値はfloat、、、leftまたはデフォルトです。rightinheritnone
  3. floatが実際に何をするかを覚えておくことも非常に重要です。それは物事を包み込みます。つまり、フロートされている div の「奇妙な」動作に気づき始めたのは、ブラウザがフロートを何と考えているかを忘れているためです。(IE、ブラウザーは、フロートが適用された div の下の div やブロックなど、ラップするつもりのないものをラップしています) 通常、フロートがcleared. これを行うには、構文を使用しますclear: both。（代わりbothに、rightまたはleft右のフロートまたは左のフロートのみをクリアしたい場合）通常は空に適用されます（実際には空である必要はありませんが、そうすることは慣例になっているようです) 要素を必要な場所に配置します。clearleft、right、none、inheritまたはboth。

良いリソース。

以下のリソースは、フロートの真の能力についてさらに詳しく学ぶために推奨されます。時間をかけて、以下のリンクを参照してください。

于 2012-09-05T02:29:05.537 に答える