1

Web ページのヘッダーとしてプロジェクト タイトルがあります。このプロジェクト タイトルは、「pagetitle」という div 内にあります。プロジェクトのタイトルの後に 2 つの単語があり、1 つは左側に、もう 1 つは右側に配置する必要があります。「pagetitle」div内のすべてに白い背景が必要で、2つの単語の後に少しスペースを残します。2 つの単語に対して「padding-bottom:10px」を試しました。ただし、白い背景は、含まれる 10px をカバーするように引き伸ばされません。どうすればいいのかわかりますか？

乾杯、正洪

<div class ="pagetitle" style="background-color:black;">
        <center style="padding: 10px 0 0 0">Executive Summary Dashboard<center>
        <br><left style="float:left; padding:0 0 10px 10px;">Subject Selected:</left><right style="float:right;padding:0 10px 10px 0; background-color:green; margin-bottom:10px;">Time frame:</right></br>
        </div>
4

3 に答える 3

1

フロートをクリアする必要があります。

  1. これをcssに追加します

    .clearfix:before, .clearfix:after { content: "\0020"; 表示ブロック; 高さ: 0; オーバーフロー: 非表示; } .clearfix:after { クリア: 両方; } .clearfix { ズーム: 1; }

  2. クラス .clearfix をトップ div に追加して、div class="pagetitle clearfix" を持つようにします。

于 2012-08-23T10:02:06.937 に答える
1

フロートを「含める」必要があります。overflow: hiddenこれを実現する 1 つの方法は、コンテナー要素を設定することです。ただし、clearfix と呼ばれる手法は他にも 1,000 あります (インターネット上でたくさん見つけることができます)。そのうちのいくつかは、要素に を追加する必要がありclear: bothます。

いくつかの提案された読書：

于 2012-08-23T10:02:31.837 に答える
0

- left と right は有効な html タグではありません

-html とスタイルを分離 (外部スタイルシートを使用)

フィドルの例

于 2012-08-23T10:08:07.583 に答える