テキストを含むディビットを展開する

Question

私は以下を持っています。しかし、私はアウトターdivと矢印が中央に整列するように展開する青のタイトル領域を取得しようとしています。私はちょうどテキストがラップするように25％で外側divを設定しました。

.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

：

#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

私はあなたが達成しようとしている正確に何かわからないが、それはこのようなもののように聞こえる：

だけ .bn-recに width:100%;を適用することになる

EDIT

あなたのコメントについて - 私はそれを理解していると思います。どのようにして<div>のテキストを囲み、<div>タグdisplay:inline-block;を作成し、その幅を％で制限するのはどうですか？その後、私はここで行ったように％でも、矢印のマージンを増やす：

https://jsfiddle.net/030y329m/

はあなたが考えていたものに近いものですか？これが実現するのは非常に簡単ですdisplay:table-cellを使用して