0

HTML / CSSを学習していますが、問題が発生しました。私は現在、サイドプロジェクトとしてgoodwill.heyscout.comに取り組んでいます。

learnlayout.orgから、divを使用してレイアウトを構造化する最良の方法は、内側に位置：絶対、外側に位置：相対を指定することであることがわかりました。これは機能します。

ただし、これにより、position：absoluteを追加するとすぐに配置がオフになります（プロファイルカードを並べて表示する必要があります）。絶対位置がないと、プロファイルカードのレイアウトを変更したい場合にすべてがシフトします。下の2つのプロファイルカードでわかるように、変更されていないため、それらは整列します。

誰かが私を正しい方向に向けることができますか？また、私のコードはかなり乱雑であり、それを本当に上手くする必要があることも知っています...コードを改善する方法に関する他の提案も役立つでしょう。

4

3 に答える 3

3

float: leftあなたはあなたのクラスに投げることができますouter、そしてそれは彼らを再び並べて座らせるべきです。フロートは非常に強力である可能性があるため、ある時点でフロートの使用について読みたいと思うかもしれません（最初は頭を動かすのが少し難しい場合）

.outer {
    width: 49%;
    display: inline-block;
    float: left;
}

ところで、私はあなたがid="outer"複数回使用していることに気づきました。class="outer"IDは一意である必要があるため、これをに変更する必要がありますが、クラスは複数回使用できます。上記のCSSで、（ IDでターゲットにする.outerのではなく）クラス名でターゲットにしているときに使用したことがわかります。#outer

于 2013-03-16T00:31:55.337 に答える
0

あなたが見つけた興味深い問題。なぜこのように動作しているのか正確にはわかりませんが、＃boxdivに直接テキストがあるかどうかに関連しているようです。2番目のテストから「テスト」を削除すると、期待どおりに整列します。同様に、最初のdivとまったく同じコンテンツを2番目のdivに配置すると、それらは整列します。

改善のために、IDを再利用しないことから始めます（たとえば、＃outerや#boxで行っているように、これらはクラスである必要があります）。id属性は一意である必要があり、2つのDOM要素が同じIDを持つことはできません。

また、カードのリストを表すulを#businesscardsに使用することをお勧めします。これにより、＃outerがliになります。これは#navlistで行ったので、私が何を意味するかがわかります。

于 2013-03-16T00:32:27.690 に答える
0

vertical-align: top;あなたの#outerdivにちょうど与えなさい。問題は解決されます。

これは子要素にのみ発生するため、問題を解決するには次のようなものを指定します。

div > * {  /* or just  '*' */
    vertical-align: top; /* or middle */
}
于 2013-03-16T02:02:18.713 に答える