HTML佈局 - 1在左邊，兩個層疊右鍵

Question

所以我試圖創建圖像下面所示的佈局。我需要：
- 兩個堆疊的圖像，右邊是相同的高度左
- 寬度不熄滅的頁面
- 整個容器爲中心
- Div的是動態

目前，我還沒有成功..

到目前爲止的代碼：

風格：

#menucontainer{position:absolute; display:block; width:100%; margin-top:5%; margin-left:0 auto; text-align:center } 
    #menucontainer div{display:inline-block; vertical-align:top; padding:0 !important} 
    #highscore, #howto{display:inline-block; ;} 
    #highscore img, #howto img{width:100%; -moz-box-shadow: 0 0 5px #888; 
    -webkit-box-shadow: 0 0 5px#888; 
    box-shadow: 0 0 5px #888} 
    #play{width:100%; -moz-box-shadow: 0 0 5px #888; 
    -webkit-box-shadow: 0 0 5px#888; 
    box-shadow: 0 0 5px #888} 
    #left{width:50%; } 
    #right{margin-left:1%; width:40%;} 
    #highscore{margin-top:3.5%} 
    #centerit{margin:0 auto;} 

HTML：

<div id="menucontainer"> 
    <div id="centerit"> 
    <div id="left"> 
     <img src="pics/play.png" id="play"/> 
    </div> 

    <div id="right"> 
     <div id="howto"><img src="pics/howto.png" /></div> 
     <div id="highscore"><img src="pics/scores.png" /></div> 
    </div> 
</div> 

Answer 1

有可能做到這一點的幾種方式。我用div與display: table這可能有點棘手讓圖像高度匹配起來，你應該能夠玩弄它，並讓它工作。繼承人什麼我用

HTML

<div class="box"> 
    <div class="table"> 
    <div class="left"> 
    <img class="img" src="http://placehold.it/300x216" /> 
    </div> 
    <div class="right"> 
     <div class="nest"> 
      <img class="img" src="http://placehold.it/200x103" /> 
     </div> 
     <div> 
      <img class="img" src="http://placehold.it/200x103" /> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

*, *:before, *:after { 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box 
} 

.box { 
    max-width: 900px; 
    margin: 0 auto; 
} 

.table { 
    display: table; 
    background: lightblue; 
    border-collapse: collapse; 
    padding: 0; 
    width:100%; 
} 
.left, .right { 
    border-collapse: collapse; 
    display: table-cell; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 
.left { 
    background: pink; 
    padding: 20px 10px 20px 20px; 
    text-align: center; 
} 
.right { 
    background: lightgreen; 
    padding: 20px 20px 20px 10px; 
} 
.nest { 
    padding-bottom: 10px; 
} 
.img { 
    display:block; 
    width: 100%; 
    height: auto; 
} 

我做了一個Fiddle if you want to see it in action。希望有所幫助。

Answer 2

這是使用table元件

注調整邊界間隔對小區之間

風格#main_container與文本對齊空間的示例：中心和垂直對齊：中間

#main_container{ 
 
    display:table-cell; 
 
    width:700px; 
 
    height:700px; 
 
    border:solid; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
} 
 
td{ 
 
    border:solid; 
 
    
 
} 
 
img{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
table{ 
 
    border-spacing: 5px; 
 
}

<div id='main_container'> 
 
<table> 
 
    <tr> 
 
    <td rowspan='2'> 
 
     LEFT 
 
    </td> 
 
    <td class='right'> 
 
     IMAGE1 
 
    </td> 
 
    </tr> 
 
<tr> 
 
    <td> 
 
    Image2 
 
</td> 
 
</tr> 
 
</table> 
 

 

 
<table> 
 
    <tr> 
 
    <td rowspan='2'> 
 
     <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSie95sTN5Pbo6and9-fWIXSSjXhDTOy87TFsxfw3ddF6JnNS6'> 
 
    </td> 
 
    <td class='right'> 
 
     <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSie95sTN5Pbo6and9-fWIXSSjXhDTOy87TFsxfw3ddF6JnNS6'> 
 
    </td> 
 
    </tr> 
 
<tr> 
 
    <td> 
 
    <img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLCSh6c5nj_PGN1TjWJ7LrL4-MxaxNaZ51uL5BV7vlAgJQoVDJjQ'> 
 
</td> 
 
</tr> 
 
</table> 
 
</div>