Bootstrap div放置

Question

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我需要这个结果：

所以我需要一张占据屏幕宽度50％的图片，然后是一个水平居中的大标题，但是垂直位于顶部;和＆＃34;更多......＆＃34;水平向右，但垂直向下的文本。我该如何设法做到这一点？请有人帮帮我吗？

Answer 1

这是你的意思吗？

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

.description{
  background-color: blue;
}

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

Answer 2

以下是您的解决方案：使用display flex使两列具有相同的高度，然后使用position relative ad absolute来定位列

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;