-1

いくつかのタイルを作成しましたが、それらを 1 つの 内に配置したいと考えています。私の問題は、ヘッダー行から既に始まっています。赤い部分が「header-left.png」と「header-right.png」、紫の部分が繰り返しタイル「header-center.png」です。

私がすでに持っているもの：

.test {
width: 800px;
height: 200px;
border: dashed 1px #006597;
background-image: url('../images/standard/header-left.gif'), 
    url('../images/standard/header-center.gif');
background-repeat: no-repeat, repeat-x;
}

しかし、2 番目の背景を 50px の後に開始して、header-left.gif の後に開始するようにするにはどうすればよいでしょうか? また、3 番目の背景を右に配置するにはどうすればよいですか?

これは私が今得るものです： 例1

これが私の目標です: 例2 赤: ヘッダー左 紫: ヘッダー中央の繰り返し 黒: ヘッダー右 緑: 背景の繰り返し 青: フッター画像

4

3 に答える 3

0

ヘッダーを 3 つの div に分割し、各ヘッダー div の背景を読み込みます

于 2013-11-13T20:34:13.290 に答える
0

次のようなことを試してください：

HTML

<container>
  <header>
    <div class="red">
    <div class="purple">
    <div class="black">
  </header>
  <div class="green">
...

CSS

.header{
  width: 800px;
}

.red{
  display: inline-block;
  width: 50px;
}

.purple{
  display: inline-block;
  width: 650px;
}

.black{
  display: inline-block;
  width: 100px;
}

そして、あなたの現在の背景情報を追加してください

于 2013-11-13T20:44:35.967 に答える
0

ヘッダーをコンテナー内にラップし、3 つの個別の要素を隣り合わせに配置します。

#headerLeft{/*Custom Styles*/}
#headerCenter{/*Custom Styles*/}
#headerRight{/*Custom Styles*/}

ボディ コンテナーとフッター コンテナーを用意します。

ここにフィドルがあります

背景色のスタイルを画像と交換することができ、それはあなたが探しているものでなければなりません.

于 2013-11-13T20:32:12.003 に答える