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

标签 html css

我正在为 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;}

最佳答案

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

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

关于html - 3 Columned Ribbon 没有按照我想要的方式工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18220010/

相关文章:

button - CSS3 按钮在 Web 和 iOS 上的呈现方式不同

css - Bootstrap 4-水平和垂直对齐

CSS sprite 未出现在 Firefox 中,但显示在 Chrome 中

css - 使用 CSS 时 Canvas 被拉伸(stretch),但使用 "width"/"height"属性正常

html - 标题居中,副标题居“右”

html表格背景不显示?

javascript - 浏览器未使用文本框和提交按钮输出网页

html - 如何使文字在导航栏中居中对齐

javascript - 加载脚本时何时使用 async vs defer?

html - div类 :hover + divclass2 - not working