0

ページの左上にロゴが入った div があり、それに沿ってテキスト付きのツールバー用に別の div を作成したいと考えています。問題は、その新しい div を残りのスペースの全幅にする方法がわからないことです...画面の全幅を使用しようとするだけで、テキストがロゴの上に表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
  div#topbar {
    width: 100%;
    position: fixed;
    top:0px;
    left:0px;
    height:133px;
    background-image :url(bkgnd_header_tile.jpg);
    padding: 0px;
    margin: 0px;
  }
  div#logo {
    width: 187px;
    height: 133px;
    position: fixed;
    top:0px;
    left:0px;
    background-image:url('headerlogo_home.jpg');
  }
  div#text {

  }

  body {

  }    
</style>
</head>
<body>
  <div id="topbar">
    <div id="logo"></div>
    <div id="text">
      <span id="campuses">asdf</span>
      <span id="title">Blah</span>
    </div>
  </div>
</body>
</html>

トップバーは、高さ 133px、幅 100% の 1 つの大きな div であると想定されています。ツールバーの画像背景を保持するために使用されます。別の div は、左上の幅 187px のロゴ用です。

3 番目の div を画像の右側に配置するにはどうすればよいですか?

4

3 に答える 3

2

あなたが何をしようとしているのか理解できたら、これがあなたがする必要があることです: トップバーの幅を設定します。位置を設定する必要はありません。

#topbar{
 width:100%;
 height:133px;
}

次に、ロゴを左にフロートする必要があります。

#logo{
 width:187px;
 height:133px;
 float:left;
}

次に、テキストを左にフロートするように設定し、幅を 100% に設定します。

#text{
 width:100%;
 height:133px;
 float:left;
}
于 2012-11-28T22:53:40.110 に答える
1

これはうまくいきますか？数行しか抜けていないようです。

于 2012-11-28T22:49:40.440 に答える
0

これは CSS3 のものであり、仕様はまだ変更される可能性がありますが、calc を調べることができます。

[ https://developer.mozilla.org/en-US/docs/CSS/calc ]

[ http://dev.w3.org/csswg/css3-values/#calc-notation ]

width: calc(100% - 187px);
于 2012-11-28T22:51:19.373 に答える