Question

我正在尝试放一条与我的内容一样宽的缎带，但是将两侧“溢出”到身体上。示例here。这是我到目前为止的HTML。有三个图像：色带的中间部分，然后是两个侧面。我把中间部分放在了h1中，现在我试图将两侧排成一行。

<body>

  <div id="container">

   <div id="leftside">
   </div>

   <div id="rightside">
   </div>


   <div id="content">

      <header>
          <h1>This is the body of the ribbon</h1>
      </header>
   </div>
</div>

</body>

我在CSS上的镜头。我一直在试验，这就是我需要的，但我确信有一百万个更好的解决方案。我想知道最佳做法是什么，因为我确信我在这里违反了很多规则。

#container {
    width: 825px;
    min-height: 960px;
    margin: 0 auto;
}

#left {
     background-image: url(side.jpg);
     background-repeat: no-repeat;
     width: 59px;
     height: 48px;
     position: absolute;
     margin-top: 20px;
     margin-left: -58px;

 }

#right {
    background-image: url(side.jpg);
    background-repeat: no-repeat;
    width: 59px;
    height: 48px;
    position: absolute;
    margin-top: 20px;
    margin-left: 825px;
}

#content {
    width: 825px;
    min-height: 700px;
    margin: 0 auto;
    background: url(other.jpg) repeat;
    margin-top: 20px;
    margin-bottom: 20px;
    top:0;
    overflow: auto;
}

h1 {
    text-indent: -9999px;
    background-image: url(banner.jpg);
    background-repeat: repeat-x;
    margin-top: 0;
    height: 48px;
}

Answer 1

肯定有一百万种方法可以实现这一目标。最好的方法将在很大程度上取决于您的网站进展情况。

归结为相对和绝对定位。

实现这一目标的一种方法是构建您的网站：

<body>
    <div id="header">
        <div id="ribboncenter"></div>
        <div id="ribbon1"></div>
        <div id="ribbon2"></div>
    </div>

    <div id="content">
        Your content
    </div>

    <div id="footer">
        Your footer
    </div>
</body>

对于典型网站而言，这是非常松散的框架。 CSS会是这样的：

#header{
    width:800px; //Subjective to however big you want your site
    margin:0 auto; //Positions the header in the center
    position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
    position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
    width:50px; //Subjective to whatever the width of your "ribbon" is
    top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
    width:100%; //Sets width to the width of #header
    background:url(ribboncenter.png); //Subjective to image
#ribbon1{
    left:-50px; //Subjective to the width of the image, moves it 50px left of #header
    background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
    right:-50px; //Subjective to the width of the image, movesit 50px right of #header
    background:url(my-ribbon2.png); //Subjective to whatever your image is
}

以下是示例http://jsfiddle.net/NZ8EN/

这一切都非常松散，但希望能让你知道要采取的方向。

还有其他方法可以解决这个问题。

Answer 2

尝试将#right和#left divs放在#content div内，给#content position relative（所以它成为孩子#left和#right）的父参考，绝对定位#left和#right：

HTML：

<body>
    <div id="container">
      <div id="content">
            <div id="leftside"></div>
            <div id="rightside"></div>
          <header>
              <h1>This is the body of the ribbon</h1>
          </header>
       </div>
    </div>
</body>

CSS：

#left {
    position: absolute;
    top: 0;
    left: -59px;
}
#right {
    position: absolute;
    top: 0;
    right: 59px;
}

Answer 3

除非你支持IE7，否则我可能会选择这样的东西：

http://jsfiddle.net/G5jkt/

这是您需要添加的CSS：

h1 {
    position: relative;
}

h1:before {
    content: '';
    height: 100%;
    left: -59px;
    top: 0;
    position: absolute;
    background-image: url(side.jpg);
    background-repeat: no-repeat;
    width: 59px;
}

h1:after {
    content: '';
    width: 59px;
    height: 100%;
    background-image: url(side.jpg);
    background-repeat: no-repeat;
    right: -59px;
    top: 0;
    position: absolute;
}

您必须像这样更改HTML：

<div id="container">
  <div id="content">
    <header>
      <h1>Hello Here</h1>
    </header>
  <div>
</div>

使用：before和：after有助于从文档中删除特定于设计的HTML并完成工作。

关键是使用绝对定位。在您的示例中，您的功能区末尾位于页面顶部 - 它们与您尝试基于其位置的H1没有任何关系。

最简单的方法是在H1内删除负责此功能区的HTML。然而，这在语义上并不是最好的。你可以在色带末端和H1周围添加一个包装，但这是额外的标记。

通过使用：after和：before，您使用H1作为父项，因为它具有相对位置，并且绝对定位相对于该H1的伪：before和：after元素。这是理想的，因为伪元素现在可以继承诸如高度，背景颜色等内容。

色带定位在容器外面

3 个答案: