0

http://dev.dealercontrol.net/dealercontrol/index_comp1.html

このページでは、字幕の左側に旗を浮かせようとしています

<div>
              <div class="flag certified">Certified</div>
              <div class="subtitle left">Deal On 09 Black Lamborghini LP560</div>
            </div>

フラグを適切にレイアウトすることができないようです。そうするための最良の方法は何ですか? また、フラグの高さを設定して、その中のテキストをしっかりと折り返すにはどうすればよいですか?

4

2 に答える 2

2

いい主君。

そのページでは非常に多くのCSSが使用されているため、自分自身を複雑に結び付けているのも不思議ではありません。firebug を使用して、任意の要素で継承およびオーバーライドされたスタイルの膨大なスタックを見てください。

最初は単純な方法でうまくfloat:left いきますが、2 つの要素の幅が親コンテナーよりも狭い場合にのみ機能します。

次に、上記のコードは実際にはページにあるものではありません。コンテナ div が多すぎる - 必要な 2 つの要素を同じ親の兄弟ノードとして単純化して移動し、両方を指定しfloat:leftます。

第三に、膨満感を減らします！.clearクラスは純粋に肥大化しています (こちらを参照)。実際には 2 つ以上の CSS ファイル (グローバル ベースとページ拡張) は必要ないので、ファイルを圧縮してマージします。できるだけ多くのタグ セレクター スタイルを切り取ります (これにより、継承された/無視されたすべてのスタックが作成され、解読が困難な状況に陥ります)。その時点で、機能するデザインと、軽量で応答性の高いページができて、将来より簡単にデバッグできるようになることを願っています。

于 2009-08-14T20:55:20.383 に答える
0

フラグをdiv内に置き、左に浮かせます

<div>   
  <div class="subtitle left">
    <div class="flag certified" style="float: right">Certified</div>
    Deal On 09 Black Lamborghini LP560   
  </div>
</div>
于 2009-08-14T20:46:32.927 に答える