0

左側に画像があり、左側にリンクがあるヘッダーを作成しようとしています。

基本的には、以下のとおりです。

[ここにロゴ] Link1 Link2 Link3

テーブルの代わりに div を使用しようとしていますが、「流動性」を維持しながらこれを行うにはどうすればよいですか?

ここにコンテナのCSSがあります：

.container {
    width: 85%;
    max-width: 1260px;
    min-width: 680px;
    background: #FFF;
    margin: 0 auto;
}

これはヘッダーの私のcssです：

.header {
    background: #FFF;
    width: 100%;
    height: 10%;
}
.header2 {
    float: right;
    width:49%;

}

ヘッダーは画像用、header2 はテキスト用です。

これが私がそれを呼び出す方法です：

<body>

<div class="container">
  <div class="header"><a href="http://www.college.edu"><img src="http://newhope.edu/images/Logo.png" alt="" name="" width="40%"  id="Insert_logo" style="background: #FFF; display:block;"  /></a> 
   <div class="header2">
   test
   </div>
    <!-- end .header --></div>

残りのコードを確認したい場合は、お知らせください。

header2 に見られるように、独自のクラスを作成してみました。ヘッダーを分割する必要があるだけで、テーブルを使用したくありません。

ありがとう！

4

1 に答える 1

0

「右側」のリンクを意味していると思います。代わりにこれを試してください：

.header {
    background: #FFF;
    float: left;
    width: 50%;
    height: 10%;
 }

.header2 {
    float: right;
    width: 50%;
 }

そして、clearコンテンツが巻き上げられないように、次のような下にあることを確認してください。

<br style="clear: both" />
于 2013-07-12T18:20:32.833 に答える