1

我试图放一条与我的内容一样宽但将侧面“溢出”到身体的丝带。这里的例子。这是我到目前为止的 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;
}
4

3 回答 3

2

肯定有一百万种方法可以做到这一点。最好的方法很大程度上取决于您的网站的进展情况。

它归结为相对和绝对定位。

实现此目的的一种方法是构建您的网站，如下所示：

<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/

这一切都非常松散，但希望能让您对所采取的方向有所了解。

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

于 2013-10-23T18:03:19.893 回答
0

尝试将#rightand#left divs放在 里面#content div，给出#content一个positionof relative（这样它就成为孩子#leftand的父参考#right）并绝对定位#leftand #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;
}
于 2013-10-23T18:05:18.207 回答
0

除非你支持 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 没有关系。

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

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

于 2013-10-23T18:31:35.110 回答