Question

我想将.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;}

我使用float来定位两端，我的问题是使用float或position：absolute的最佳解决方案。我问这个因为我不希望老浏览器出现问题。

感谢的。

Answer 1

您可以尝试使用背景图像，背景重复和背景位置设置的嵌套DIVS。像这样：

<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上设置宽度和高度。这个提示的灵感来自this article。

Answer 2

您的代码大多是正确的。 float 将正常工作，但您必须将所有这些元素浮动到左侧。不要将最后一个漂浮在右边，它不会按照你的想法做到。

我的意思是：

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

在XHTML / CSS中定位绝对与浮点

2 个答案: