.gray-section
{
	background: #252f34;
	color:#fff;
}
.gray-section .img-section
{
	width: 45%; 
}
.img-section img
{
	width: 100%; 
}
.gray-section .text-section
{
	 width: 55%;
}
.article-preview > div
{
	float: left;
}
.article-preview:nth-child(odd) 
{
	background-color: rgba(0,0,0,0.05);
}
.article-preview:after
{
	content: '';
	display: block;
	clear: both; 
}
.text-section
{
	position: relative;
	top: 68px;
	left: 50px;
}
.text-section h2
{
	margin-bottom: 20px;
}
.text-section p
{
	font-size: 18px;
 	letter-spacing: 1px;
 	margin-right: 30px;
}
.text-section .sub-heading
{
	font-size: 22px;
	margin-top: 0;
}

<section class="green-section">
    <div class="wrapper">
       <div>
            <h2>一个标题</h2>
             <div class="hr"></div> 
             <p>lorem ipsum dolor sit amet,
             consectetur adipisicing elit.</p>
       </div> 
       <div class="icon-group">
            <span class="icon">item1</span>
            <span class="icon">item2</span>
            <span class="icon">item3</span>
       </div> 
     </div>
     </section>
    <section class="gray-section">
      <div class="article-preview">
        
      <div class="text-section">

      <h2>愿得一人心</h2> 
      <div class="sub-heading">
              白首不相离
            </div>
      <p>lorem ipsum dolor sit amet,consectetur adipisicing elit. Atque natus veniam illo,vitae nulla quisquam elit officiis minima iure.</p> 
      </div>
      <div class="img-section">
          <img src="img/pic01.jpg"alt=""> 
      </div>
    </section>
  
     <section class="gray-section">
      <div class="article-preview">
        <div class="img-section">
          <img src="img/pic02.jpg"alt=""> 
      </div>
      <div class="text-section">
      <h2>愿得一人心</h2> 
      <div class="sub-heading">
              白首不相离
            </div>
      <p>lorem ipsum dolor sit amet,consectetur adipisicing elit. Atque natus veniam illo,vitae nulla quisquam elit officiis minima iure.</p> 
      </div>
    </section>
    <section class="gray-section">
      <div class="article-preview">
        
      <div class="text-section">

      <h2>愿得一人心</h2> 
      <div class="sub-heading">
              白首不相离
            </div>
      <p>lorem ipsum dolor sit amet,consectetur adipisicing elit. Atque natus veniam illo,vitae nulla quisquam elit officiis minima iure.</p> 
      </div>
      <div class="img-section">
          <img src="img/pic03.jpg"alt=""> 
      </div>
    </section>

同样遇到这个问题，谁有老师的源代码么？？

Talk is cheap,show me your code...

我也是这样

我也遇到一样的问题，请问你解决了吗？就是宽度对.text-section不起作用，写了也不起作用

你看看你这里是不是忘记写了，我原来忘记了写了，写上去图片的位置就对了，.gray-section .text-section{ width:55%; }

我的也是这样  。同问

你文字部分的上级元素限制宽度了吧导致右边的图片左浮动的时候向左移动了

是不是右浮动了 你看看那个图片