html - 带有焦点中心元素的 CSS 盒装布局

Question

早上好

我正在尝试设计一个网页，我认为这是一个简单的 CSS 布局，但我想确保以最有效的方式处理它。由于我的名声，我无法附上我的模型图片，但希望下面的 JSfiddle 能清楚地说明我的最终目标是什么。

我还用我已经完成的内容模拟了一个 jsFiddle。但是有些元素我不确定如何完成。 IE，“选项 1”的宽度我想稍微重叠“选项 3 和 4”。以及覆盖 3 和 4 的一些投影，为选项 1 提供一些深度和焦点。

http://jsfiddle.net/rXq7F/3/

我不确定是否有这种设计的名称，但如果您能以正确的方式完成此类设计，我们将不胜感激!

谢谢!

     <div class="row">
    <div class="span4">
      <h2>2</h2>
      <p> </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span4">
      <h2>3</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span4 middle" style="">
      <h2>1</h2>
      <p></p>
      <p></p>
    </div>

    <div class="span4">
      <h2>4</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>


    <div class="span4">
      <h2>5</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>        

  </div>

Answer 1

然后你将不得不使用 z-index。

我给了中间一个z-index: 2，给了其他的z-index: 1。

Fiddle