Question

我正在构建一个仪表板类型的显示屏，显示顶部的几个小项目。当用户点击其中一个项目时，其他项目变小，所选项目扩展。这符合预期，除了所选项目似乎正在向下移动。当我用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中测试过相同的结果。

有什么想法导致转变？

Answer 1

您可以设置：

vertical-align: top;

Answer 2

浮动：左;在.myitem中缺少

Answer 3

您已使用内联块作为3个div的显示样式。内联元素类似于与文档一起流动的文本元素。您在顶部看到的额外空间是由于内联元素的当前字体大小。 [尝试将所有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;
}

为什么我的元素在被选中时会降低？

3 个答案: