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

Question

我正在尝试在 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>

忽略主要背景图像和一些较小的样式问题，我在并排 float 两个 block 时遇到问题，同时 float 内部橙色文本 block 。

我想我可以通过使背景相对然后内部文本 block 绝对来实现这一点。希望它在 block 内是绝对的，而不是在页面内。

非常感谢您的建议。

Answer 1

@Dhaval Chheda 建议查看 flexbox，我也推荐它 - 它们是获得所需内容的更好方法。

.container {
  display: flex;
}

See this link分配 block 结构的方法，以及this fiddle为它在行动。这样您就可以更精确地控制页面的布局。