html - 如何为 H2 Elements 制作响应式图形框架？

Question

首先，如果这个问题对于这里的一些更有经验的编码人员来说似乎愚蠢得令人难以置信，我深表歉意。我没有接受过专业的编码培训，经验也很少。

因此，目前我正在对我正在开发的网站上的 CSS 工作表进行修补，并且我正在尝试创建图形重音来封装我首页上的第一个 h2 标题。我试着用 html 来做这件事，只是在 H2 标签周围嵌入图像，但我无法让它与疯狂的换行结合在一起。

这是我正在尝试做的事情的快速模型 Here is a quick mockup of what I am trying to do

Here is a picture of the closest result i've gotten...

我使用以下 HTML 代码完成了此操作:

    <img src="https://www.bookacookie.com/files/theme/border1.png" 
    alt="Decorative Border" style="text-align:center;" width="24" 
    height="39"><h2 class="wsite-content-title" style="text- 
    align:center;">Welcome</h2><img 
    src="https://www.bookacookie.com/files/theme/border2.png" 
    alt="Decorative Border" style="text-align:center;" width="24" height="39">

现在我确实设法隔离了我的网站 CSS 表中似乎控制我正在处理的领域的部分，我将在下面列出:

}.wsite-content-title, #banner h2, .blog-title, h2#wsite-com-title {
font-size: 1.5em;
font-family: 'Montserrat', Arial, sans-serif;
margin: 0 auto 1em;
font-weight: bold;
color: #000000;
}

有人可以指出创建这些类型口音的正确和/或最简单方法的方向吗？我对这个过程比较感兴趣，而不仅仅是这个修复，因为我认为自己需要在很多不同的地方使用这种技术。

感谢您的宝贵时间!

Answer 1

您可以阅读有关 flex-box 的内容，这是执行该任务的一种非常灵活的方式。

查看我为您制作的 fiddle 示例，这可能就是您要找的

https://jsfiddle.net/42mjvzL3/

HTML

<div class="container" style="background-color: yellow"></div>
<div class="item" style="background-color: blue"></div>
<div class="item" style="background-color: grey"></div>
<div class="item" style="background-color: red"></div>

CSS:

.container {
width: 200px;
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.item{
flex-grow: 1;
}