Expandierende Divs mit Text

Question

Ich habe folgendes. Ich habe jedoch versucht, den blauen Titelbereich mit dem äußeren Teil und dem Pfeil in der Mitte zu erweitern. Ich habe eine äußere div um 25% gesetzt, nur so dass der Text umschließt.

.breakingNewsRec { 
 
    width: 100%; 
 
    background: #FFF; 
 
    position: relative; 
 
    border: solid 2px #6A7791; 
 
} 
 
.breakingNewsRec>.bn-rec { 
 
    width: auto; 
 
    display: inline-block; 
 
    background: #6A7791; 
 
    position: relative; 
 
    margin-right: 20px; 
 
} 
 
.breakingNewsRec>.bn-rec>h2 { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0 20px; 
 
    line-height: 40px; 
 
    font-size: 0.8em; 
 
    color: #FFF; 
 
    box-sizing: border-box; 
 
} 
 
.breakingNewsRec>.bn-rec>span { 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 10px; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 10px 0 10px 10px; 
 
    border-color: transparent transparent transparent #6A7791; 
 
} 
 
.breakingNewsTown { 
 
    width: 100%; 
 
    height: 40px; 
 
    background: #FFF; 
 
    position: relative; 
 
    border: solid 2px #74936A; 
 
} 
 
.breakingNewsTown>.bn-rec { 
 
    width: auto; 
 
    height: 40px; 
 
    display: inline-block; 
 
    background: #74936A; 
 
    position: relative; 
 
    margin-right: 20px; 
 
} 
 
.breakingNewsTown>.bn-rec>h2 { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0 20px; 
 
    line-height: 40px; 
 
    font-size: 0.8em; 
 
    color: #FFF; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
} 
 
.breakingNewsTown>.bn-rec>span { 
 
    width: 0; 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 10px; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 10px 0 10px 10px; 
 
    border-color: transparent transparent transparent #74936A; 
 
}

<div style="width: 25%"> 
 
    <div class="breakingNewsRec"> 
 
    <div class="bn-rec"> 
 
     <h2>Recreation News</h2><span></span> 
 
    </div>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj 
 
    <img src="imgs/slides/slide2.jpg" width="25%">asdfljas dflkjsdf alskdjf asdfl</div> 
 
    <div class="breakingNewsTown"> 
 
    <div class="bn-rec"> 
 
     <h2>Town News</h2><span></span> 
 
    </div>fareveae vasev</div> 
 
</div>

Answer 1

display:table-cell Mit dieser ist sehr einfach zu erreichen:

#news { 
 
    width: 50%; 
 
} 
 
#news .item { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
} 
 
#news .item h2 { 
 
    color: white; 
 
    font-size: 100%; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    border-color: inherit; 
 
} 
 
#news .item h2:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    border-style: solid; 
 
    border-width: 10px 0 10px 10px; 
 
    border-color: transparent; 
 
    border-left-color: inherit; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    left: 100%; 
 
} 
 
#news .item h2, 
 
#news .item div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 0 1.5em; 
 
} 
 
.style1 { border-color: #697791 } 
 
.style1 h2 { background: #697791 } 
 
.style2 { border-color: #74936a } 
 
.style2 h2 { background: #74936a }

<div id="news"> 
 
    <div class="item style1"> 
 
     <h2>Recreation News</h2> 
 
     <div> 
 
      <p>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl</p> 
 
     </div> 
 
    </div> 
 
    <div class="item style2"> 
 
     <h2>Town News</h2> 
 
     <div> 
 
      <p>fareveae vasev</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Ich bin nicht genau sicher, was Sie versuchen zu erreichen, aber es klingt wie etwas wie folgt aus:

, die nur width:100%;-.bn-rec anwenden würde

EDIT

In Bezug auf Ihren Kommentar - ich glaube, ich verstehe dann. Wie wäre es, den Text in einem <div> zu umgeben und beide <div> Tags display:inline-block; zu machen und ihre Breite um% zu beschränken. Dann Erhöhung der Marge des Pfeils, auch durch eine%, wie ich hier tat:

https://jsfiddle.net/030y329m/

Ist das näher an, was Sie dachten?