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 。

小提琴

Answer 2

嘗試使其負責任。

<div class="row">
<ul class="span4">
<li>2</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>3</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row middle">
<ul class="span4">
<li>1</li>
<li></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>4</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>5</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

body {
    clear: both;
    width: 70%;
    margin: 0 auto;
    padding-top: 10%;
}
.span4 {
    list-style: none;
    z-index: 1;
}
.row {
    float: left;
    margin: 0;  
    width: 18.6%;
    border: 1px solid #EEE;
    height: 150px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index: 1;
}
.row:first-child {
    margin-left: 3%;
}
.row:last-child {
    margin-right: 3%;
}
.middle {
    height: 200px;
    margin-top: -25px;
    box-shadow: 0 10px 5px #EC6262, 0 -10px 5px #EC6262;
    -webkit-box-shadow: 0 10px 5px #EC6262, 0 -10px 5px #EC6262;
    z-index: 2;
}
.row li {
    padding: 8% 0;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    text-decoration: none;
}