html - 左右对齐 2 个元素 Bootstrap 问题

Question

我正在尝试实现图片上的这种定位效果。左边的文本有一些填充底部和顶部的文本和右侧图像的绝对位置，但我无法正确实现它。有什么建议吗？

我会在这里分享我的代码

.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 添加了一些边距(即 margin-left: 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 -->