html - Bootstrap div 放置

Question

<div class="row">
    <div class="col-xs-6">
        <img src="img.png" width="100%" />
    </div>
    <div class="col-xs-6">
        <div class="row"><p>Main text</p></div>
        <div class="row"><p>More...</p></div>
    </div>
</div>

我需要这个结果:

所以我需要一张占屏幕宽度 50% 的图片，然后是一个水平居中但垂直位于顶部的大标题；和“更多...”文本，水平位于右侧，但垂直位于底部。我如何设法做到这一点？有人可以帮帮我吗？

Answer 1

这是您的解决方案:使用 display flex 使两列具有相同的高度，然后使用相对位置广告绝对定位您的列

.title{
  background-color: red;
  text-align: center;
}

.title h1{
  width: 100%;
  }

.description{
  background-color: yellow;
}

/*NEW*/
.row{
  display:flex;/*makes col have same height*/
  }

.details{
  position: relative !important;
  }

.description{
  position: absolute !important;
  bottom: 0;
  }

.description p{
  width: 100%;
text-align: right;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-xs-12">
    <div class="col-xs-6">
        <img src="https://placehold.it/150/150" width="100%" />
    </div>
    <div class="col-xs-6 details">
        <div class="row col-xs-12 title">
          <h1>Main text</h1>
        </div>
        <div class="row col-xs-12 description">
          <p>More...</p>
        </div>
    </div>
</div>