在左右列中的图像上浮动文本块

Question

我正在尝试使用wordpress重新创建附加的屏幕截图，并且我遇到了一些css问题。

正如您所看到的，有两列具有非常类似的内容。

目前我已经走到了这一步：

＆＃13;

＆＃13;

	.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;
	}
	

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

忽略主背景图像和一些较小的样式问题，我在浮动内部橙色文本块的同时浮动两个块有问题。

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

非常感谢您的建议。

Answer 1

@Dhaval Chheda建议看看flexboxes，我也建议这样做 - 他们是一个更好的方式来获得你想要的东西。

.container {
  display: flex;
}

See this link用于分割块的结构，this fiddle用于实现块的结构。这样，您就可以更精确地控制页面布局。