html - CSS:如何在不造成困惑的情况下将此按钮设置在左侧？

Question

如何将“立即购买”按钮放在该 block 的左侧？我已经尝试了所有方法，但它不会移动或弄乱一切。谁能给我一个提示？这是代码:

.colored_shortcode {
    position:relative;
    display:table;
    overflow:hidden;
    margin-bottom:18px;
    width:100%;
}

.colored_title {display:table-cell;}

.colored_title_inner {
    position:relative;
    z-index:0;
    display:block;
    overflow:hidden;
    padding:23px 40px 10px;
	background-color:#33bee5;

}

.colored_button {
    display:table-cell;
    padding:0 40px;
    min-width:200px;
    background-color:#3D4244;
    color:#FFFFFF;
    vertical-align:middle;
}

.icon_banner {
    display:block;
    float:right;
    width:55px;
    height:60px;
    background-image:url(../images/icon_banner.png);
    background-repeat:no-repeat;
}

<div class="colored_shortcode">
									<div class="colored_title">

										<div class="colored_title_inner">
											<h2>When vested in power the beauty always wins</h2>
											<p>Increase is a wordpress theme that easily adapts to your needs, allowing you quickly create a beautiful website</p>
										</div>
									</div>
									<a class="colored_button" href="#"><span class="icon_banner icon_down"></span>Buy Now</a>
								</div>

这是图片: http://upload7.ir/uploads//ca75364368a4be97d5588dde27a34b3da4ae3152.png

Answer 1

如果您愿意更改 HTML，只需将按钮包装器放在标题内容之前

.colored_shortcode {
  position: relative;
  display: table;
  overflow: hidden;
  margin-bottom: 18px;
  width: 100%;
}
.colored_title {
  display: table-cell;
}
.colored_title_inner {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  padding: 23px 40px 10px;
  background-color: #33bee5;
}
.colored_button {
  display: table-cell;
  padding: 0 40px;
  min-width: 200px;
  background-color: #3D4244;
  color: #FFFFFF;
  vertical-align: middle;
}
.icon_banner {
  display: block;
  float: right;
  width: 55px;
  height: 60px;
  background-image: url(../images/icon_banner.png);
  background-repeat: no-repeat;
}

<div class="colored_shortcode">

  <a class="colored_button" href="#"><span class="icon_banner icon_down"></span>Buy Now</a>
  <div class="colored_title">

    <div class="colored_title_inner">
      <h2>When vested in power the beauty always wins</h2>
      <p>Increase is a wordpress theme that easily adapts to your needs, allowing you quickly create a beautiful website</p>
    </div>
  </div>
</div>