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