html - float : left blocks not going as expected

Question

我正在制作一个包含 5x2 磁贴的 SharePoint 登陆页面。任何人都知道这怎么会发生？

我知道这不是最好的编码元素，因为很多!重要的。但这在 SharePoint 中是必需的。

                     <div id="topLeft">
                        <!--CS: Start Web Part Zone Snippet-->
                        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <div id="topLeftWebpart" xmlns:ie="ie">
                            <!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="xae7ae0b76116430e84918de3195e8a9f" FrameType="TitleBarOnly" Orientation="Vertical">-->
                                <!--MS:<ZoneTemplate>-->
                                    <!--DC: Replace this comment with default web parts for new pages. -->
                                <!--ME:</ZoneTemplate>-->
                            <!--ME:</WebPartPages:WebPartZone>-->
                        </div>
                        <!--CE: End Web Part Zone Snippet-->
                    </div>

CSS:.image-area-left-top 是图像的容器。

#topLeft {
        position:relative!important;
        width:47.46%!important;
        top: 30px;
        left: 5%;
        margin:0px;
        float: left;
        padding:0px;
        display:inline-block;
        max-width: 485.984px;
        min-width: 450px;
    }
    #topLeftWebpart{
        width:100%!important;
    }
    .image-area-left-top{
        position:relative;
        float:left;
        width:20%!important;
        height:auto!important;
    }
    .image-area-left-top .image{
        width:75%; 
        height:75%;
        margin-top: 12.5%;
        margin-left: 12.5%;
        margin-bottom: 12.5%;
        margin-right: 12.5%;

Answer 1

据我所见，图标的大小似乎并不相同。这可能会导致对齐时出现一些问题。您应该通过 css 将所有图像强制为特定大小，看看是否有帮助。