html - 3 Columned Ribbon 没有按照我想要的方式工作

Question

我正在为 friend 设计一个非常简单的网站。在设计中，他希望一条丝带在页面中间水平拉伸(stretch)。

像这样:

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

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

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

分辨率有点低，但是你可以看到中间 div 的边框是关闭的，当拉伸(stretch)或收缩页面时，中间 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 这样的东西。 .

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