html - 在左右列中的图像上 float 文本块

我正在尝试在wordpress中重新创建所附的屏幕截图，并且遇到了一些CSS问题。



如您所见，有两列内容非常相似。

目前，我已经做到了：

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

<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>

忽略主要的背景图片和一些较小的样式问题，我遇到的问题是并排浮动两个块，同时浮动内部橙色文本块。

我以为可以通过使背景相对然后使内部文本块为绝对来实现此目的。希望它在块内是绝对的，而不是页面内的。

非常感谢您的建议。

最佳答案

@Dhaval Chheda建议查看flexbox，我也建议这样做-它们将是获取所需内容的更好方法。

.container {
  display: flex;
}

See this link用于划分块的结构，而this fiddle用于对其进行操作。这样，您将可以对页面的布局进行更精确的控制。