Question

大家好我正在尝试使用CSS来排列一些图像。因此，在屏幕抓取中，我需要较小的磁贴“密码管理”等，以排列更大的磁贴，即“IT服务”。 float'left'很适合对齐较小的瓷砖，但我似乎无法在同一条线上使用大小瓷砖。

以下代码：

由于

<style>
.wrapper {
box-sizing: border-box;
height:100%;
background: #ffffff;
text-align: left;
}
.wrapper2 {
box-sizing: border-box;
height:100%;
background: #000fff;
text-align: left;
margin: 2px;
 }
.box {
width: 171px;
height: 152px;
display: inline-block;
float: left;
margin: 2px;
}
.topicImage{
display: inline-block;
border: 0px;
float: left;

}
</style>
<!--<div style="width: 80%; display: table;">-->
<div style="width: 89%; display: table; background: #ffffff;">
<div style="display: table-row">
    <div style="width: 100px; display: table-cell;"><img     
   src="/IT/SiteAssets/KnowIT-HubImages/it-services.png" alt="IT Services" 
 class="topicImage"></div>
    <div style="display: table-cell;">
      <div class="wrapper">
          <div class="box"><a href="/IT/Pages/GIT-Password-Management.aspx" 
      class="topicImage"><img src="/IT/SiteAssets/KnowIT-HubImages/password-
       management.png" alt="Helpful information on how to manage and reset 
       your network password"class="topicImage"></a></div>
          <div class="box"><a href="/IT/Pages/GIT-Email-Management.aspx" 
    class="topicImage"><img src="/IT/SiteAssets/KnowIT-HubImages/email.png" 
     alt="Helpful information on how to access/manage your email account, 
      how to identify and block unwanted email"class="topicImage"></a></div>
          <div class="box"><a href="/IT/Pages/GIT-Web-Access.aspx" 
          class="topicImage"><img src="/IT/SiteAssets/KnowIT-
         HubImages/InternetAccess.png" alt="Overview of the rules on 
          website restrictions and how to request access to a blocked site" 
         class="topicImage"></a></div>
          <div class="box"><a href="/IT/Pages/GIT-Skype-for-Business.aspx" 
          class="topicImage"><img src="/IT/SiteAssets/KnowIT-
          HubImages/SkypeforBusiness.png" alt="Click here for tips and  
          hints on how to use Skype for Business" 
          class="topicImage"></a></div>
          <div class="box"><a href="/IT/Documents/Guest%20Wifi%
          20Password.pdf" class="topicImage"><img 
        src="/IT/SiteAssets/KnowIT-HubImages/guest-wifi.png"  
      alt="Information on joining the guest WIFI" 
       class="topicImage"></a></div>   
          <div class="box"><a 
          href="\\norgine.lan\netlogon\scripts\AddPrinter.qds" 
          class="topicImage"><img src="/IT/SiteAssets/KnowIT-
         HubImages/printer.png" alt="Click here to find and connect to a 
         printer at your current location" 
          class="topicImage"></a></div>              
          <div class="box"><a href="/IT/Pages/GIT-Microsoft-Home-Use-
           Program.aspx" class="topicImage"><img src="/IT/SiteAssets/KnowIT-
          HubImages/home-use.png" alt="How to purchase Microsoft Office 
          Professional at a discounted price" class="topicImage"></a></div>
          <div class="box"><a  
           href="file://norgine.lan/NETLOGON/UserDUA.hta" 
           class="topicImage"><img src="/IT/SiteAssets/KnowIT-
            HubImages/Updatemydetails.png" alt="Click there to update your 
            profile information" class="topicImage"></a></div>
          <div class="box"><a href="http://sqm.norgine.com/SpamConsole/" 
            class="topicImage"><img src="/IT/SiteAssets/KnowIT- 
            HubImages/ManageSpamEmail.png" alt="Click here to manage and 
            release blocked emails"class="topicImage"></a></div>
          <div class="box"><a
          href="http://cloud.norgine.com/Lists/SiteRequests/NewForm.aspx
            Source=http%3A%2F%2Fcloud%2Enorgine%2Ecom"   
     class="topicImage"><img src="/IT/SiteAssets/KnowIT- 
     HubImages/RequestSharePointSite.png" alt="Click here to raise a 
      request to create a new SharePoint site" class="topicImage"></a></div>
          <div class="box"><a 
     href="http://apps.norgine.com/sites/CSP/eGSOP/_layouts/WordViewer.aspx?
     id=/sites/CSP/eGSOP/Released%20Forms%20and%20Templates/TP-
     0276.dotx&Source=http%3A%2F%2Fapps%2Enorgine%2Ecom%2Fsites%2FCSP%
     2FeGSOP%2FReleased%2520Forms%2520and%2520Templates%2FForms%2FOwner   
     2520SiteFunction%2Easpx%3FGroupString%3D%253B%2523Harefield%2520%2528 
     252B%2520Global%2520Functions%2529%253B%2523IT%253B%2523
      26IsGroupRender%3DTRUE&DefaultItemOpen=1 " class="topicImage"><img
     src="/IT/SiteAssets/KnowIT-HubImages/Requestdomainname.png" 
    alt="Clickhere to view Norgines domain repository, request new or 
     retire domains" class="topicImage"></a></div>
          <div class="box"><a href="  " class="topicImage"><img 
    src="/IT/SiteAssets/KnowIT-HubImages/ITSecurityForm.png" alt="Click   
   here to complete and print the IT Security form" 
   class="topicImage"></a></div>
          <div class="box"><a href="/IT/Documents/System%20Register.pdf" 
     class="topicImage"><img src="/IT/SiteAssets/KnowIT-
     HubImages/ServiceCatalogue.png" alt="Click here for a list of 
     information and contact details for business systems and application" 
     class="topicImage"></a></div>
          <div class="box"><a href=" " class="topicImage"><img   
  src="/IT/SiteAssets/KnowIT-HubImages/MobilePhones.PNG" alt="Coming soon" 
   class="topicImage"></a></div> 
      </div>
    </div>
</div>

Answer 1

使用flexbox解决此问题

您可以在此链接中看到Flexbox完整指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我的建议是：

摆脱内联样式。
以下是我的调整的简化版代码：

.wrapper {
  box-sizing: border-box;
  background: #ffffff;
}
.box, .topicImage {
  background-color: #0078d7;
}
.box {
  width: 150px;
  height: 150px;
  margin: 2px;
  display: inline-block;
  vertical-align: top;
}
.topicImage{
  width: 304px;
  height: 304px;
  margin: 2px;
}

<div>
    <div style="float: left;"><div class="topicImage"></div></div>
    <div>
      <div class="wrapper">
          <div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--              
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div> 
      </div>
    </div>
</div>

更新版本，固定宽度：

.main {
  margin: 0 auto;
  max-width: 1078px;
}

.wrapper {
  box-sizing: border-box;
  background: #ffffff;
}
.box, .topicImage {
  background-color: #0078d7;
}
.box {
  width: 150px;
  height: 150px;
  margin: 2px;
  display: inline-block;
  vertical-align: top;
}
.topicImage{
  width: 304px;
  height: 304px;
  margin: 2px;
  float: left;
}

<div class="main">
    <div class="topicImage"></div>
    <div>
      <div class="wrapper">
          <div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--              
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div><!--
          --><div class="box"></div> 
      </div>
    </div>
</div>

CSS对齐图像越来越大的图像

2 个答案: