Stairstep Div格式

Question

我有一個客戶希望他們的主頁上有一個特定的設計，以匹配他們雜誌封面上看到的內容。封面的基本樓梯設計永遠不會改變，但偶爾會出現圖像。如果不使用1張大圖像，我一直無法設計出這種格式。

這裏有一個小提琴：http://jsfiddle.net/z6ghY/

注：本琴的出現是客戶想要怎樣待觀察是正確的。我的問題是它使用一個必須偶爾改變的大圖像。如果將這三幅圖像分開，將會容易得多。

任何人都知道我能做到這一點的最佳方式？圖片可以通過HTML或CSS放置，無論哪種方式都無所謂，儘管在HTML中看到它們對於搜索引擎優化很有好處。

萬一小提琴不會在這裏它是展示形象.. http://i.imgur.com/6s2i9L7.png

HTML：

<h2>Innovative Engineering Solutions in Material Handling</h2> 

<div class="home-container"> 
<div class="home-content"><p>Experience the impact that Lauyans &amp; Company can make on your business success. Through innovative engineering solutions in material handling, Lauyans will take responsibility for the planning, execution and acceptance of your project.</p> 

<!--h2>Lauyans... why choose anyone else?</h2--> 


<h2 style="margin: 80px 0 0 30px;">Lauyans...<br /> why choose<br /> anyone else?</h2> 


</div><!-- END HOME CONTENT --> 

</div><!-- END HOME CONTAINER --> 

<div class="home-container2"> 
<div class="home-planning"> 
<h3>Planning</h3> 
</div> 
<div class="home-execution"> 
<h3>Execution</h3> 
</div> 
<div class="home-acceptance"> 
<h3>Acceptance</h3> 
</div> 
</div> 

CSS：

.home-container { width: 690px; height: 459px; background: url('/wp-content/uploads/2013/01/home-image.png') 50% 100% no-repeat; } 
.home-container2 { width: 690px; } 
.home-content { width: 430px; height: 429px; padding: 15px; } 
.home-content p { padding: 0; margin: 0; } 
.home-content h2 { padding-top: 10px; margin: 0; } 
.home-container2 h3 { padding-top: 0px; margin: 0; text-align: center; } 
.home-planning { width: 230px; float: left; } 
.home-execution { width: 230px; float: left; } 
.home-acceptance { width: 230px; float: left; } 

Answer 1

我想借此絕對定位路線考慮您要使用的「獨特」佈局：

http://jsfiddle.net/z6ghY/1/

我返工的一切（包括我只好從別的地方來獲取圖像）：

HTML

<div class="home_con"> 

    <h2 class="pge_title">Innovative Kitten Solutions</h2> 

    <div class="home_step"> 
     <h2 class="step-title">Lauyans...<br /> why choose<br /> anyone else?</h2> 

     <p> 
      Experience the impact that Kittens can make on your business success through 
      purring. 
     </p> 

     <img class="img1" src="http://www.vivapets.com/img/album/52/19052_white_persian_kittens_for_adoption_thb.jpg" /> 

     <img class="img2" src="http://www.saudivets.com/images/Vpic20.jpg" /> 

     <img class="img3" src="http://fc04.deviantart.net/fs70/f/2011/167/2/8/kitten_tracks_banner_100x300_by_xxjessie_kittehxx-d3j2h51.png" /> 

    </div> 

    <div class="img_text"> 
     <div class="img_text_ele">Planning</div> 
     <div class="img_text_ele">Execution</div> 
     <div class="img_text_ele">Acceptance</div> 
    </div> 

</div> 

CSS

.home_con h2.pge_title { font-weight:bold; font-size:1.125em; } 

.home_step { width:300px; height:300px; position:relative; } 
.home_step h2.step-title { position:absolute; top:110px; left:10px; } 
.home_step p { width:200px; position:absolute; top:10px; left:10px; } 
.home_step img { position:absolute; bottom:0px; } 
.home_step .img1 { left;0px; } 
.home_step .img2 { left:100px; } 
.home_step .img3 { left:200px; } 

.home_con .img_text { width:300px; overflow:hidden; } 
.home_con .img_text_ele { width:100px; float:left; text-align:center; } 

Answer 2

這樣就需要將圖像是切碎了一點，但它會工作，如果這是很酷的做：

http://jsfiddle.net/5qfLj/1/

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="span2">1</div> 
     <div class="span1" style="background:#ccc;">2</div> 
    </div> 
    <div class="row"> 
     <div class="span1">3</div> 
     <div class="span1" style="background:#666;">4</div> 
     <div class="span1" style="background:#ccc;"></div> 
    </div> 
    <div class="row"> 
     <div class="span1" style="background:#999;">5</div> 
     <div class="span1" style="background:#666;">6</div> 
     <div class="span1" style="background:#ccc;">7</div> 
    </div> 
</div> 

CSS：

.container { 
    width:600px; 
} 

.row { 
    overflow: hidden; 
} 

.span1 { 
    float:left; 
    width:200px; 
    height:200px; 
} 

.span2 { 
    width:400px; 
    height:200px; 
    float:left; 
}