對齊2個元素左右引導問題

Question

Iam試圖實現這種圖片上的定位效果。文字從左側有一些填充底部和頂部的文字和位置絕對的右側圖像，但我無法正確實現。有什麼建議麼 ？

我將分享在這裏我的代碼

.luma-founders { position: relative; padding: 30px 0; background: #8bc541; } 
 
.luma-founders h3 { font-family: "Questrial", sans-serif; font-size: 36px; color: #fff; margin: 79px 0 40px 0; padding: 0 11px; } 
 
.luma-founders p { font-family: "Raleway-Regular", sans-serif; font-size: 16px; line-height: 30px; color: #fff; padding: 0 11px; } 
 
.luma-crew { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; } 
 
.luma-crew img { min-width: 100%; min-height: 100%; height: auto; width: auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="luma-founders"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Who is Luma Comfort</h3> 
 
      <p>We at Luma Comfort want the best for you. We pride ourselves as innovators in design and functionality, to ensure that you have the best quality products to choose from.</p> 
 
      <p>Our philosophy is that comfort doesn't just come from how well our products work, but how good they make you feel to look at them in your home or office. Luma Comfort knows the importance of quality products that look beautiful too.</p> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="luma-crew"> 
 
      <img src="https://s18.postimg.org/p5pxb0r95/founders.jpg" width="783" height="510" title="someText" alt="someText"> 
 
     </div> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- container -->

Answer 1

增加了一些裕.luma-crew img（即保證金左：100％;）

.luma-founders { position: relative; padding: 30px 0; background: #8bc541; } 
 
.luma-founders h3 { font-family: "Questrial", sans-serif; font-size: 36px; color: #fff; margin: 79px 0 40px 0; padding: 0 11px; } 
 
.luma-founders p { font-family: "Raleway-Regular", sans-serif; font-size: 16px; line-height: 30px; color: #fff; padding: 0 11px; } 
 
.luma-crew { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; } 
 
.luma-crew img { min-width: 100%; min-height: 100%; /*height: auto; width: auto;*/ margin-left: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="luma-founders"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Who is Luma Comfort</h3> 
 
      <p>We at Luma Comfort want the best for you. We pride ourselves as innovators in design and functionality, to ensure that you have the best quality products to choose from.</p> 
 
      <p>Our philosophy is that comfort doesn't just come from how well our products work, but how good they make you feel to look at them in your home or office. Luma Comfort knows the importance of quality products that look beautiful too.</p> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="luma-crew"> 
 
      <img src="https://s18.postimg.org/p5pxb0r95/founders.jpg" width="783" height="510" title="someText" alt="someText"> 
 
     </div> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- container -->