爲什麼我的元素在選中時向下移動？

我正在構建一個儀表板類型的顯示器，顯示頂部的幾個小物品。當用戶點擊其中一個項目時，其他項目變小並且所選項目擴大。除了選定的項目似乎正在向下移動以外，這種方式與預期一致。當我使用Chrome進行檢查時，它不會顯示任何導致轉換的內容。如果我只在頁面上有一個項目，這似乎不會發生。爲什麼我的元素在選中時向下移動？

有如下問題的的jsfiddle：fiddle

樣頁：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Explode</title> 
    <style> 
     .mycontent { 
      padding: 0px; 
      margin: 0px; 
     } 

     .myitem { 
      height: 80px; 
      width: 150px; 
      margin: 0px; 
      padding: 10px; 
      display: inline-block; 
      background-color: blue; 
      color: white; 
      border: 1px solid #1e5799; 
     } 

     .myitem.expand { 
      height: 200px; 
      width: 300px; 
     } 

     .myitem.mycollapse { 
      width: 10px; 
     } 
    </style> 
</head> 
<body> 
    <div class="mycontent"> 
     <div class="myitem">Item 1</div> 
     <div class="myitem">Item 2</div> 
     <div class="myitem">Item 3</div> 
     <div class="myitem">Item 4</div> 
    </div> 

    <script src="/Scripts/jquery-1.10.2.min.js"></script> 
    <script> 
     $(".myitem").click(function (e) { 
      $(".myitem.expand, .myitem.mycollapse").removeClass("expand mycollapse"); 
      $(".myitem").not(e.target).addClass("mycollapse"); 
      $(e.target).addClass("expand"); 
     }) 
    </script> 
</body> 
</html>

我已經在Chrome 33.0.1750.117和Firefox 27.0.1具有相同的結果進行測試。

任何想法是什麼導致了轉變？

來源

2014-02-25 Jason

您可以設置：

vertical-align: top;

來源

2014-02-25 18:50:32

輸出的答案在這裏的速度總是讓我感到吃驚。這固定它，謝謝！幾分鐘後它會讓我接受。 – Jason

浮動：左;遺漏在.myitem中

來源

2014-02-25 18:50:56 shyamnathan

這也工作，我接受了另一個，因爲它給了我更多的佈局靈活性。 – Jason

您已經使用內聯塊作爲3格的顯示樣式。內聯元素與文檔中流動的文本元素相似。您在頂部看到的額外空間是由於內聯元素的當前字體大小。 [嘗試將所有div的字體大小更改爲20或30像素，頂部空間增加並嘗試字體大小：0px，所有三個框都會對齊]。

如果您希望元素從左向右流動，則可以使用float：left屬性。試試這個小提琴，如果這是你期望

http://jsfiddle.net/QvM5W/

.mycontent { 
padding: 0px; 
margin: 0px; 
} 
.myitem { 
height: 80px; 
width: 150px; 
margin: 0px; 
padding: 10px; 
float:left; 
background-color: blue; 
color: white; 
border: 1px solid #1e5799; 
} 
.myitem.expand { 
height: 200px; 
width: 300px; 
} 
.myitem.mycollapse { 
width: 10px; 
}

來源

2014-02-25 19:11:30 siva

爲什麼我的元素在選中時向下移動？

回答

相關問題