浮動：左側塊沒有按預期進行

我正在製作一個帶有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：圖像配區，左上方爲影像的容器。

#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%;

來源

2016-12-17 Tiboon

我最好的猜測是，一些圖像/瓷磚的高度略有不同，因此，一些浮標被放置在瓷磚＃3（Examen Commissie）和瓷磚＃6（Inleverbox ）。如果這些時間/圖像甚至比其他瓷磚高1px，那將會影響浮體。你可以通過在'.image-area-left-top .image'上設置一個固定的高度來測試這個問題，看看這是否解決了這個問題。 –

解決了這個問題。這個.png圖像並不完美 – Tiboon

據我可以看到，圖標的大小似乎並不相同。這在對齊時可能會導致一些問題。你應該通過CSS強制所有圖像達到一定的大小，看看是否有幫助。

來源

2016-12-18 08:39:43

浮動：左側塊沒有按預期進行

回答

相關問題