如何实现这种观点？拼贴/杂志产品

Question

我想知道如何调用这种视图以及如何使用HTML / CSS实现它：http://www.amazine.com/

对我来说，它看起来像是混搭或杂志的产品，看起来很酷。

Answer 1

有很多方法可以制作这样的布局，你可以试试这样的东西：

＆＃13;

＆＃13;

.container{
  position : relative;
  border: blue solid 1px;
  display: inline-block;
  width: 450px;
  }

.container h2{
  position: absolute;
  background: white;
  top: 20px;
  left: 150px;
  z-index: 50;
  }

.container .second{
   position: absolute; 
    bottom: 20px;
    left: 170px;
}

.container .third{
   position: absolute; 
    bottom: 30px;
    left: 300px;
}

＆＃13;

<div class="container">
   <h2>Some text</h2>
  <img class="first" src="http://lorempixel.com/180/290/"/>
  <img class="second" src="http://lorempixel.com/140/200/"/>
  <img class="third" src="http://lorempixel.com/110/170/"/>
</div>

<div class="container">
  <h2>Some text</h2>
  <img class="first" src="http://lorempixel.com/190/280/"/>
  <img class="second" src="http://lorempixel.com/150/220/"/>
  <img class="third" src="http://lorempixel.com/100/160/"/>
</div>

＆＃13;

＆＃13;

＆＃13;