如何将我的 div 排列为 2 列，使其看起来像一个网格/照片库？

Question

我是编码和 web 设计的新手。 现在，我正在构建一个展示我创建的其他网站的投资组合网站。 我正在尝试创建一个布局，其中我在网站上的 Div 分为两列（在“我的工作”下）。 我试图弄清楚该使用什么，但我不确定我是否诚实。 我玩过 display flex 和 display grid，但没有得到我想要的结果。 这是我的以下内容...我还将链接其他人的网站，以使您了解我正在努力实现的目标。 任何帮助或提示将不胜感激......谢谢！

另外，我将包括我的代码。

我的页面和到目前为止的工作

我正在尝试创建的内容

 * { margin: 0; box-sizing: border-box; } h1 { text-align: center; padding-top: 370px; padding-bottom: 370px; background-color: rgb(38,61,66); color: white; font-family: 'Courier New', monospace; font-weight: normal; } h2 { text-align: center; padding-top: 100px; padding-bottom: 30px; font-family: 'Courier New', monospace; font-weight: normal; }.main-body { background-color: rgb(244,132,95); width: 100%; overflow-x: hidden; }.main-body2 { padding-top: 150px; padding-bottom: 150px; float: left; width: 25%; } #tribute { width: 100%; } #product { width: 100%; } #survey { width: 100%; } #technical { width: 100%; }.work { border: 1px solid #ccc; }.work:hover { border: 1px solid rgb(38,61,66); }.desc { text-align: center; padding-top: 5px; padding-bottom: 5px; font-family: 'Courier New', monospace; font-weight: normal; }

 </div><.DOCTYPE html> <html> <head> <link href="css/style:css" rel="stylesheet"> </head> <body> <h1>Welcome To My Portfolio</h1> <main> <div class="main-body"> <h2>Some of my work</h2> <div class="main-body2"> <div class="work"> <a target="_blank" href="https.//codepen:io/dechirila19/full/poEOXVz"> <img src="https.//lh3.googleusercontent?com/P8cbTC4Y-l-4nwkjTh3S67d5qHCvRMX7XyE6cXAsbTg4IX1AvB9-xEHexWDOK1q5YidvZtxXLo4TzjqLd3n21kJM8j_3xr_a5aZM3UyX3GrCg_0C--3zujKK-AL7TEyJxbmyJaRv16NvcTR6-B1y-P03TcvNtp11zB3tHYEtvf5TrwZJtInwwE0l_BkhUR-0OKuQO4O2RZZY0zeoo0Mrq7fd4i5rjf3HWb0yJ4WAC3TQP8w1vW0XdarfZZeBtfvnZny9BAEfYqIoUw9Rp9hcXp5Se4zkRs4TaJmJmRwOiWb44RjvNCJ4-oYTGfJZ9R2vL21eUEO28G0TexVTkhHxeB4c4APGteu-iNAB6jx-xUZa37WATiDPylYTtUS4vBU5tbFgvxu9Lvfb4mwVJN8gG6CzuKHou80TJS0yEgxQI6tOZrunP1DtIOAKgXgbGtGqLe6bK8YxYc5yYBH9a5mbp3eA2k50Rrh3Uh7YXpl02GmaPI05fak2wGJ0o0lyWgo0rNd6H0w3bpC91Anqvv_hTVnI1drISA5n8bCfY1m8UNM827qozZQh9Q7CUXOjf_Vkh2NunlyGiKtksT94gtCk59_HfDeBiNb-FPFlKjcRnxS9OyGAQdHFGWgrs5i40KOUKqsEyxY-2zujyECMZidTp4Vvi7mRRsiUMVPAdEkWyLO462xkFUiYVN5_hKOXlQ=s571-no:authuser=0" alt="Tribute Page" id="tribute"> </a> <div class="desc">Tribute Page</div> </div> </div> <div class="main-body2"> <div class="work"> <a target="_blank" href="https.//codepen:io/dechirila19/full/VwKgmBg"> <img src="https.//lh3.googleusercontent?com/IJaG-M-uOIMWYyrEv1yOZRtlRmTV8diJY-d6DmFxyVJt2BE2-iXsRwFH1G21cOJgDBJCbjAZdvEG01gOTixgkZGmxaRbdlRqvaaVUI0wggikKtB8sGXa6irKIe3B3VB2apWyNghvYGEC0IoCCJgCskOP9x1Bs6wJAUSPONZa1maJrkOBYL_T3PPlfj5Jym_mj9hiuCAKYTMM_rV3ErLk94DJk3bSj2_ppQfo0meoZ_abrk7M81bB171SdDEKQ-q4MKf5SNQkZpZ4Xt-DWYINMbKe6ify9a_9jnAytdJxtcsDGzymzCAfTsW9Oo1QKuRVcp_fZmlKuL8ddJ2TPoYjW4UgwdU6Zt2Qya4Q2NvWcjUSsuScgChbtrqPFUDRuKAwkKD3YAdjAozXQxgGWHqKIR9Uvfd50NYGJRspzXm9t4HNmTHnknO3Alq80HUPVvXuxM3v6rtbfmj8k5__o5YXh7yAUBhO2WYRJxx3255laQXIPxXzXt9013nUp35bKsHGHxL56m6fdADPtxAm1grkEcICHlIoOyNayX2c34pMpXwaJFajEODZ4Le7ng0K7_ORv0CnfFM4Z4tEuw5B1DSK17UpPsRn2NFjPLSkI9BqCA-7ZL_DSlYZYwba7A4PyDbIXHstNzHjKuFPhmb3seCfVYkzMj4mOeGGzHwtL-P9ABTK9ImvZ4l4ILFgGMomXw=w567-h568-no:authuser=0" id="survey"> </a> <div class="desc">Survey Form</div> </div> </div> <div class="main-body2"> <div class="work"> <a target="_blank" href="https.//codepen:io/dechirila19/full/oNzrYQZ"> <img src="https.//lh3.googleusercontent?com/QkjpqBlrvlMgUdoK6qSnXAcaqSFAdsZEDwrEsl96CGa-QXQrSUOiuf87cQlnYw6ciaelPWkk6hffKoyys4rcWb24DzGId2g2mHUFE52N0toZ6RzIQlXogtYDyWk2YVdnKshfyU_uEmIZJXED_qQ-M4bJ-l22us9yhDOSOSprhEp1oQoB4tICP-d8VPetANQihYa018aa87ixwKu9IA1vRgeS1QEPNcs9MXl0mPaEYx7br_jZuT-DJ2Ae_revIXieopvH_s7Iw-p9kEbb0OzB8lbqThiwCXmDaF6RcfhEDhI_A-sRlnscG6sqCOMn2bPGkNoWbKLkd3KpFnknwFwGpyMX-E3Q4jiBAcbaiROV70WlzkkypOSRwHAZuwWDRwf9qlnAOx-hJ46kMryfuH4ONqh6pe2UMe5lzaEnBaKMYpFuzupAelufIxl2maSraO7LFVEhixhAPJF7ldSMbaFNhXjNEk93DnvxOQuTqLAsWYCBfmFxVCFzWF2hfOHmK2YW7kTI4wTdt66QaI_fbfKeBrKOdAQ3qozVbnpBWymdgXc0rPmn2NrJFoLt327yX0XlIhOdvN-u31koYN3ThSUmJpKI15Pid8ScF7JifzAat4mEJQxk_bDZvCSTQnTCYQQagTVOHfixcQZ-OHfUp5korzvdg4L9sjLVK66meA19KXNNeWDYc3iadl1LscknFQ=w572-h571-no:authuser=0" id="product"> </a> <div class="desc">Product Landing Page</div> </div> </div> <div class="main-body2"> <div class="work"> <a target="_blank" href="https.//codepen:io/dechirila19/full/RworweN"><img src="https.//lh3.googleusercontent?com/_K_RWpOCQKs5GZYhQkoupmelGzWqrZmhnOJ9zcRpSMZfDDGF8Z9x6KzCA-DpZdYKoh-sXB4B8wjzGXKiOseSkreQwa-rLboJmonxq1Ea2OdNYTIx5Ztdx4ZdHBliSKlEVPDej1yp1VqT80FYpcpao4TOpaS2doyBPFHg-KSkHID-Rr1tPHc8waaA44DiCvDpFI8zbT2E1qP9KprXOl5Zl9oKyOFOTr102ZqWvnWi4PnxgsnNSwQ34qDvYJmVX1C1XdcC1Yf7GNHbNjJ_Elh612G3tC2Ool7ynQ9TWnttk5T9Ah0HKks1BctQolk8NFHNnOKXAu0i2qVrz7Bq7GbYMH2h96v_btud-dGaV05E8rKQ2bMDLIhZeSq4cTPyBvhkHru5L0FgRUNuajR45suoZgbNVtkllKv5PM7pKfXbpgxDtTikii6-y6OhpoAZC3sFkyX0tWQP93PbJIJdXBPLjE1zoUNgxLqE0J2TDmU0mTYl1QcumbP2_C1biY9Q4fRj6MYgwiULgcsgb1EICpUVnsPIRVlc_jeMa81zTfoF-GJ_cIChtE0jTQt6IrDWjW55FU8rICtOUyRRyVhfy81_tkXdObtmzlJ8w9ZJL7RCXjbeCbl4YW0lTBoEqygUZJwRDAYuJTBOm4FWJIBIhC__lI1OKrVEwelyWyugOPVjSiyEt_IXk-V78vb2KkiJ7g=w570-h571-no?authuser=0" id="technical"> </a> <div class="desc">Technical Documentation Page</div> </div> </div> </div> </main> </body> </html>

Answer 1

使用显示：弹性：

使用 class flex-main 在一个大 div 中扭曲四个 div。 这是css：（只有有变化的部分）

  .main-body {
    background-color: rgb(244,132,95);
    width: 100%;
    
  }
  .flex-main{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
  }
  
  .main-body2 {
    padding-top: 150px;
    padding-bottom: 150px;
    float: left;
    width: 35%;
    margin-right: auto;
    margin-left: auto;
  }

这会像你想要的那样工作。祝你好运！

如何将我的 div 排列为 2 列，使其看起来像一个网格/照片库？

问题描述

1 个解决方案

解决方案1
-1 2021-02-20 20:25:48

如何将我的 div 排列为 2 列，使其看起来像一个网格/照片库？

问题描述

1 个解决方案

解决方案1 -1 2021-02-20 20:25:48

解决方案1
-1 2021-02-20 20:25:48