Question

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

像这样：

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;}

Answer 1

你只需要在同一个单位中调整一切。我建议只使用像素，除非你采用响应式设计，如果你采用响应式设计，我建议使用像foundation.js这样的东西。

编辑：+1迈克尔彼得森的SVG想法。那也是一个很好的。

Answer 2

也许尝试设置

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

其中功能区的填充是左/右图像的宽度。然后你就可以看到文字了。

Answer 3

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

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/

3 Columned Ribbon不按我想要的方式工作

3 个答案: