Css标题与另一个div的div

Question

我努力定制div。我找到了一些解决方案，但是当我使用span有两行文本时，它似乎对我不起作用。这是我尝试用两种不同类型的文字实现的图像。

这里是我的代码，它似乎是在背景方面工作。任何帮助将不胜感激。

＆＃13;

＆＃13;

.container {
border: 1px solid #000; 
padding: 10px; 
text-align: center;
}

.content {
margin: -40px 0 20px 0; 
text-align: center;
background-color: #ccc;
padding: 10px 25px 10px 25px;  text-transform:uppercase;
border: 1px solid #000; 
}

.title {color: red;}
.subtitle {color: green;}

＆＃13;

<br />&nbsp;<br />

<div class="container"><div class="content"><span class="title">Title</span><br /><span class="subtitle">Subtitle</span></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non mi eget quam lobortis porta. Ut sagittis sem a fringilla ultricies. </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.container {
  display: inline-block;
  width: 150px;
  position: relative;
  border: 1px solid #000;
  padding: 20px;
}
.content {
  position: absolute;
  top: -50px;
  right: 32px;
  display: inline-block;
  text-align: center;
  background-color: #ccc;
  padding: 10px 25px 10px 25px;
  text-transform: uppercase;
  border: 1px solid #000;
}
.title {
  color: red;
}
.subtitle {
  color: green;
}
.wrapper {
  padding: 100px;
  text-align: center
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="content">
      <div class="title">Title</div>
      <div class="subtitle">Subtitle</div>
    </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non mi eget quam lobortis porta. Ut sagittis sem a fringilla ultricies.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以轻松使用position：

＆＃13;

＆＃13;

* {margin: 0; padding: 0; list-style: none;}
.container {border: 2px solid #000; position: relative; min-height: 250px; width: 250px; margin: 100px auto;}
.container .header {position: absolute; border: 2px solid #000; background-color: #fff; width: 50%; text-align: center; left: 25%; top: -40px; background: #ccc;}
h1 {color: red; font-size: 1.5em; font-weight: normal; line-height: 1.5;}
h2 {color: green; font-size: 1.2em; font-weight: normal; line-height: 1.5; padding: 0 0 5px;}

＆＃13;

<div class="container">
  <div class="header">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

感谢所有那些最终帮助我的人，我发现对我来说最好的解决方案是调整宽度和其他一些东西。 *这个解决方案最适合我，因为我使用了几个专栏和一个响应式wordpress主题，提出这个解决方案以防有人感兴趣。

我主要担心的是它是灵活的而不是像素设置，并且标题和副标题框不应该是完整的宽度，而是填充标题背景。这个解决方案很灵活，我根据不同的列调整宽度百分比（创建额外的跨度等）。

我的解决方案如下：

＆＃13;

＆＃13;

.container {
border: 1px solid #000; 
padding: 10px; 
text-align: center;
}

.content {
    margin:auto;
    margin-top: -50px;
    margin-bottom: 30px;
text-align: center;
padding: 15px 22px 15px 25px;  
    text-transform:uppercase;
line-height: 1em;
    background-color: #ccc;
    width: 20%;
    min-width: 170px;
}

.title {color: red;}
.subtitle {color: green;}

＆＃13;

<br />&nbsp;<br />

<div class="container"><div class="content"><span class="title">Title</span><br /><span class="subtitle">Subtitle</span></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non mi eget quam lobortis porta. Ut sagittis sem a fringilla ultricies. </div>

＆＃13;

＆＃13;

＆＃13;