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

这里是您的解决方案：使用显示器挠性，使两列具有相同的高度，然后用相对位置的广告绝对定位的列

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

Answer 2

这是你的意思吗？

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