XHTML/CSS中的绝对位置与浮动位置

我想把一个.psd转换成XHTML，我有一个菜单栏，它的圆角分布在包装的所有宽度上，到目前为止，我所做的是在菜单栏的两端做切片，在中间做一个切片，设置为repeat-x

例如，我有：

 <div id="tagline" class="grid_16"><!-- begin tagline -->
            <div class="left"></div>
            <div class="center">
                <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
            </div>
            <div class="right"></div>
 </div><!-- end tagline -->


#tagline {background:url(images/tagline.jpg) repeat-x top; height:96px;}

#tagline .center {width:930px; float:left;}
#tagline .left {background:url(images/taglineLeft.jpg) repeat-x top left; width:10px; height:96px; float:left;}
#tagline .right {background:url(images/taglineRight.jpg) repeat-x top right; width:10px; height:96px; float:right;}

这是你的口号。如果你把这个主题作为一个公文包，用两行文字写一条最能描述你的业务或风格的信息。
#标语{背景：url（images/tagline.jpg）repeat-x top；高度：96px；}
#中心{宽度：930px；浮动：左；}
#tagline.left{background:url（images/taglineLeft.jpg）repeat-x左上角；宽度：10px；高度：96px；float:left；}
#tagline.right{background:url（images/taglineRight.jpg）repeat-x右上角；宽度：10px；高度：96px；float:right；}

我使用浮动来定位端点，我的问题是使用浮动或位置的最佳解决方案是什么：绝对。我问这个问题是因为我不想与旧浏览器发生问题

---

谢谢。您的代码基本正确。浮动将正常工作，但您必须将所有这些元素浮动到左侧。不要让最后一个浮起来，它不会做你认为它会做的事

---

我的意思是：

#tagline .right { ... float:left;}

---

你的代码基本上是正确的。浮动将正常工作，但您必须将所有这些元素浮动到左侧。不要让最后一个浮起来，它不会做你认为它会做的事

---

我的意思是：

#tagline .right { ... float:left;}

---

您可以尝试设置背景图像、背景重复和背景位置的嵌套div。大概是这样的：

<div id="tagline">
  <div     style="background-image: url(images/tagline.jpg);      background-repeat: repeat-x;">
    <div   style="background-image: url(images/taglineLeft.jpg);  background-repeat: no-repeat; background-position: left;">
      <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;">
          <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
      </div>
    </div>
  </div>
</div>

这是你的口号。如果你把这个主题作为一个公文包，用两行文字写一条最能描述你的业务或风格的信息。

---

不需要绝对位置的浮动。为了清晰起见，我已经内联了这些样式。请记住在最外层的DIV上设置宽度和高度。此技巧的灵感来自。

您可以尝试设置背景图像、背景重复和背景位置的嵌套DIV。大概是这样的：

<div id="tagline">
  <div     style="background-image: url(images/tagline.jpg);      background-repeat: repeat-x;">
    <div   style="background-image: url(images/taglineLeft.jpg);  background-repeat: no-repeat; background-position: left;">
      <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;">
          <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2>
      </div>
    </div>
  </div>
</div>

这是你的口号。如果你把这个主题作为一个公文包，用两行文字写一条最能描述你的业务或风格的信息。

---

不需要绝对位置的浮动。为了清晰起见，我已经内联了这些样式。记得在最外层的DIV上设置宽度和高度。这个提示的灵感来源于。

谢谢你的提示，这对我很有帮助。+1嵌套背景通常比定位装饰元素更容易、更可靠。我同意。这就是为什么我开始使用它们，即使标记看起来很难看。谢谢你的提示，这对我有很大帮助。+1嵌套背景通常比定位装饰元素更容易、更可靠。我同意。这就是为什么我开始使用它们，即使标记看起来很难看