わかりました、ここで私の問題の jsFiddle: http://jsfiddle.net/Cn8ek/とここ: http://jsfiddle.net/Cn8ek/1/ 最初の jsFiddle のフルスクリーン結果: http://jsfiddle.net/Cn8ek /埋め込み/結果/
私はフィドルで青い背景の幅を設定しようとしてきましたがauto、赤いリボン CSS と同じ方法で (その中のコンテンツに対して) サイズが変更されるように設定されていますが、何をしても常に同じサイズ: 利用可能な幅の 100% から、クラスがcontent_slider_text_block_wrap
クラスが の要素に使用している CSSsub_head_textは、要素内のテキストに応じて幅を変更する必要がある要素で、次のとおりです。
.content_slider_text_block_wrap .sub_head_text {
text-align: center;
text-transform: uppercase;
font-size: .8em;
margin: -0.5em;
padding-bottom: .5em;
position: relative;
}
.content_slider_text_block_wrap .sub_head {
padding: 0 .3em;
position: relative;
margin: 0 auto;
top: -40px;
text-align: center;
background-color: #212D3B;
font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
font-size: 1.6em;
color: #f2efe9;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
-khtml-border-radius: .5em;
border-radius: .5em;
text-transform: uppercase;
}
HTML DOM 内のすべての要素は、次のように構造化されています。
<div class="content_slider_text_block_wrap">
<div class="name_container">
<div class="sub_head">
<h1 class="h1_candidates"><span class="sidestar-left">★</span> Dan Lawless <span class="sidestar-right">★</span></h1>
<div class="sub_head_text">Chief Lending Officer • Accion Texas, Inc. • CITY, STATE</div>
</div>
</div>
<div class="centertext">
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
</div>
<br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
私が抱えている主な問題は、青い背景領域の幅をその中のコンテンツ (テキスト) に応じて変更する方法です。ただし、1行だけにする必要があり、もちろん、現在のように中央に配置する必要があります. 私はemsフォントサイズに使用していますが、ブラウザウィンドウのサイズを小さくしても違いはないようです。どのように？？
私を最も困惑させているのは、赤いリボンのh1要素の幅がその中のコンテンツ (テキスト) に応じて変化するのに、div同じ親 (h1要素として) に含まれる青い背景要素が変化しないのはなぜですか?
最後に、私の質問は次のとおりです。「その中のテキストに従って赤いリボンの背景と同じ親にある青い背景のサイズを変更し、青と赤いリボンの両方をページ内の中央に配置するにはどうすればよいですか?」