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，这是一种非常灵活的方式来完成这项任务。

看到我为你做的一个小提琴示例，这可能就是你要找的东西

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

Welcome

（抱歉，我还不知道如何发布代码段）

希望有所帮助！

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

2 个答案: