左の列と右の列の画像の上にテキストの浮動小数点ブロック

Question

添付のスクリーンショットをwordpressで再作成しようとしていますが、いくつかのCSSの問題があります。

とてもまねたコンテンツを持つ2つの列がありますあなたが見ることができるように。

は、現時点では私はこれまでのところ持っている：

\t .race-tri { 
 
\t width: 570px; 
 
\t position: relative; 
 
\t } 
 
\t .banner_txt { 
 
\t width: 250px; 
 
\t background: #F08E03; 
 
\t padding: 5px 15px; 
 
\t color: #ffffff; 
 
\t position: absolute; 
 
\t top: 150px; 
 
\t left: 0; 
 
\t } 
 
\t .race-tri h3 { 
 
\t text-transform: uppercase; 
 
\t margin-bottom: 15px; 
 
\t font-weight: 800; 
 
\t } 
 
\t

<h1 style="text-align:center;">RACES</h1> 
 

 
<div class="race-bar-text"> 
 
    <div style="float:left; width:570px; box-sizing:border-box;"> 
 
    <p>Throughout the year Tri Team Glos runs various events, notably the TTG Gloucester Triathlon and the TTG Newent Duathlon.</p> 
 
    <p>Our Triathlon is a pool based Sprint race with a 400m Swim and a two lap 28km bike course finished off with a 6km run and will take place on Sunday 29th May 2016.</p> 
 
    </div> 
 
    <div style="float:right; width:570px; box-sizing:border-box;"> 
 
    <p>Our duathlon comprises a 5k run, 18k bike and 5k run. Next year's event will take place on 3rd April 2016,</p> 
 
    <p>For those wishing to enter the Tri Team Glos' Children's Race, please <a href="#" target="blank">click here.</a> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="race-tri"> 
 
    <img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/img2.png"> 
 
    <div class="banner_txt"> 
 
    <h3>Glocester triathlon</h3> 
 
    <span class="race-date">May 25th, 2016</span> 
 
    <span class="race-type">Triathlon</span> 
 
    <p>Swim: 1km 
 
     <br>Bikd: 20km 
 
     <br>Run: 5km</p> 
 
    </div> 
 
    <a class="btn">ENTER EVENT</a> 
 
    <a class="btn" style="float:right;">MORE INFORMATION</a> 
 
</div> 
 

 
<div class="race-tri" style="float: right;"> 
 
    <img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/img-3.jpg"> 
 
    <div class="banner_txt"> 
 
    <h3>Newent Duathlon</h3> 
 
    <span class="race-date">April 16th, 2017 (TBC)</span> 
 
    <span class="race-type">Duathlon</span> 
 
    <p>Swim: 1km 
 
     <br>Bikd: 20km 
 
     <br>Run: 5km</p> 
 
    </div> 
 
    <a class="btn">ENTER EVENT</a> 
 
    <a class="btn" style="float:right;">MORE INFORMATION</a> 
 
</div>

は一方で、私は側の二つのブロック側の浮動問題が生じています主な背景画像といくつかの小さなスタイリングの問題を無視します内側のオレンジ色のテキストブロックを浮かべます。

私はこれを、相対的な背景と内側のテキストブロックを絶対にすることでこれを達成できると思いました。それは、ページ内ではなくブロック内で絶対的なものになると願っています。

多くのアドバイスをいただきありがとうございます。

Answer 1

@Dhaval Chhedaさんはフレックスボックスをお勧めしました。お勧めしますが、あなたが探しているものを得るにはより良い方法です。アクションのブロックの構造、およびそのためのthis fiddleをDIVVYする方法について

.container { 
    display: flex; 
} 

See this link。こうすることで、ページのレイアウトをより正確に制御できるようになります。