對齊像我想要的圖像有問題

基本上我想要的是我的大圖像在我的兩個小圖像的左側，我希望我的兩個小圖像堆疊在另一個之上。目前我正在運行寬度爲30％的「小圖像」類，因爲它使得它們像我想要的那樣堆疊，但我覺得有更好的方法來做到這一點。此外，這三幅圖像將在一些文本旁邊運行，這就是爲什麼我將它們全部放在一個大的div中，因此我可以將它們浮動到主文本的右側。我不介意你把我的代碼分開，我試圖找到最有效的方式，我使用HTML5和CSS3。對齊像我想要的圖像有問題

HTML5

<div class="images"> 
    <div class="large-image"> 

     <!--This is a larger image--> 
     <img alt="bussiness lage picture" src="Images/buisness-big.jpg"> 

      <div class="small-image"> 
      <!--These are two smaller images--> 
      <img alt="bussiness lage picture" src="Images/handshake.jpg"> 
      <img alt="bussiness lage picture" src="Images/calculator.jpg"> 
      </div> 
    </div> 
</div>

CSS 3

/*This deals with the main images right of the main content*/ 
.images { 
    float: left; 
    margin-top: 3%; 
} 

.large-image { 
    float: left; 
    margin-left: 10%; 
} 

.small-image { 
    width: 30%; 
    float: right; 
}

來源

2013-12-09 SecretWalrus

閉上你的大圖像迪v在大圖像之後，而不是封裝小圖像 - http://jsfiddle.net/NNjY8/ – Pete

非常感謝，我甚至沒有注意到這一點。 – SecretWalrus

您可以使用這樣的結構：

.images { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.images img { 
 
    float: left; 
 
} 
 
.images .thumbs { 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.images .thumbs img { 
 
    clear: both; 
 
    margin-bottom: 10px; 
 
}

<article> 
 
    <aside class="images"> 
 
     <img src="http://placehold.it/300/2ecc71/fff"/> 
 
     <div class="thumbs"> 
 
      <img src="http://placehold.it/145/3498db/fff"/> 
 
      <img src="http://placehold.it/145/e74c3c/fff"/> 
 
     </div> 
 
    </aside> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis suscipit dolorum repellat eveniet error a aliquam magni laudantium pariatur adipisci quisquam nesciunt unde quo. Quae ab explicabo et iure minus id ad placeat ducimus eos delectus assumenda recusandae labore! Minus modi error. Illo mollitia consequuntur ipsam fugit voluptatibus eos repudiandae! 
 
</article>

來源

2013-12-09 15:57:59 zessx

哇，這真的很酷，我打算繼續努力，看看我是否可以按照自己的喜好來安排它，謝謝你。 – SecretWalrus

對齊像我想要的圖像有問題

回答

相關問題