-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;
}

但是我怎么能告诉第二个背景，在 50px 之后开始，所以它在 header-left.gif 之后开始呢？以及如何定位第三个背景使其与右侧对齐？

这就是我现在得到的： 示例1

这是我的目标： 示例2 红色：header-left 紫色：重复 header-center 黑色：header-right 绿色：重复背景蓝色：footer-image

4

3 回答 3

0

将您的标头包装在一个容器中，并具有 3 个彼此相邻浮动的独立元素：

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

有一个正文容器和一个页脚容器。

这是一个小提琴

你可以用你的图像换掉背景颜色样式，它应该是你正在寻找的。

于 2013-11-13T20:32:12.003 回答
0

将标题分成三个 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 回答