0

我正在为朋友设计一个非常简单的网站。在设计中，他想要一条丝带在页面中间水平伸展。

像这样：

https://i.imgur.com/Hz4SH4Hh.png

我这样做的尝试是裁剪左右的“功能区”部分并显示这些图像，同时将它们左右浮动。然后创建一个内容 div，将其居中填充到功能区的中间。该解决方案非常草率，根本无法正常工作。这是它的图片

https://i.imgur.com/66C2kj5h.png

分辨率有点偏离，但你可以看到中间 div 的边框是关闭的，当拉伸或收缩页面时，中间 div 的百分比宽度会搞砸整个事情。

这是我的 HTML/CSS

<div class='ribbon-container'>
    <div id='ribbon-left'>
    </div>
    <div id='ribbon-right'>
    </div> 
    <div class='clear'></div>
    <div id='ribbon-middle'>
    </br>
        <center>
            <span class='ribbon_header'>Food Around Your School</span>
        </center>
    </div>
</div>

.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid;  border-color:#61615f;top:0; margin:0 auto;}
4

3 回答 3

0

也许尝试设置

.ribbon-middle{
    width: auto;
    padding: 0 120px;
}

其中色带的填充是左/右图像的宽度。那么您将始终看到文本。

于 2013-08-13T22:15:53.340 回答
0

由于横幅的高度没有变化，您可以使用水平重复图像作为横幅的背景，然后对横幅的左右部分使用绝对定位来完成此操作。

html变成：

<div class='ribbon-container'>
    <div id='ribbon-left'></div>
    <div id='ribbon-right'></div>
</div>

而css变成：

.ribbon-container {
    width: 100%;
    height: 120px;
    position: relative;
    background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 112px;
    height: 120px;
    background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 97px;
    height: 120px;
    background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}

我使用您发布的初始图像做了一个非常粗糙的模型。问题是图像本身不是完全水平的，所以看起来右侧在我的小提琴中没有对齐，但如果你在创建初始图像时更加小心，这将起作用。而且我没有添加文本，但这也可以使用绝对定位来完成，或者我确定的另一种方法。

您可以在以下位置查看示例：http: //jsfiddle.net/M3GmY/

于 2013-08-13T22:42:51.507 回答
0

你只需要在相同的单位中调整所有内容。我建议只使用像素，除非你使用响应式设计，如果你使用响应式设计，我建议使用类似foundation.js的东西。

编辑：对 Michael Peterson 的 SVG 想法 +1。这也是一个很好的。

于 2013-08-13T22:09:34.780 回答