如何为 H2 元素制作响应式图形框架?

Question

首先，如果这个问题对这里一些更有经验的程序员来说似乎非常愚蠢，我深表歉意。我没有接受过专业的编码培训，经验也很少。

所以目前我正在我正在研究的一个网站上修补 CSS 表，我正在尝试创建图形口音，以封装我首页上的第一个 h2 标题。我尝试使用 html 执行此操作，只是在 H2 标签周围进行图像嵌入，但我无法将其与疯狂的换行符结合在一起。

这是我正在尝试做的事情的快速模型 这是我正在尝试做的事情的快速模型

这是我得到的最接近结果的图片......

我通过使用以下 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的信息，这是一种非常灵活的方法来完成这项任务。

请参阅我为您制作的小提琴示例，这可能是您正在寻找的

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

Answer 2

最好将样式保留在一个地方。由于您显然有一个样式表，因此您应该将其全部保留在那里。话虽如此，我能够通过浮动第一个 img 和 h2 并调整 h2 的其他一些属性来获得您想要的结果。

在第一个 img 和 h2 中添加一个欢迎类：

<img class="welcome" 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 welcome" style="text- 
align:center;">Welcome</h2>

然后在样式表中，添加以下内容：

.welcome {float: left;}

并将现有类调整为：

.wsite-content-title, #banner h2, .blog-title, h2#wsite-com-title {
font-size: 1.5em;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
color: #000000;
line-height: 0;
padding: 0 10px;}

欢迎

(对不起，我还不知道如何发布片段(

希望对您有所帮助！