如何製作適合屏幕的3等分方格？

Question

我編程博客網站，我的妹妹，但我進入我解決不了的問題..

我想使她的網站看起來如下：

的職位應該是裏面的方格，和一行3格。但我無法做到這一點。我希望通過利潤擴大並適合屏幕。 （如在以下網站：https://www.chloefromthewoods.com/）

我有以下代碼：

<div id="mainDiv"> 
<div id="posts"> 
      <div id="post1" class="post"> 
       <div class="postDiv" style="background-image: url(img1.JPG)"> 
        Post... 
       </div> 
      </div> 
      <div id="post2" class="post"> 
       <div class="postDiv" style="background-image: url(img2.JPG)"> 
        Post... 
       </div> 
      </div> 
      <div id="post3" class="post"> 
       <div class="postDiv" style="background-image: url(img3.JPG)"> 
        Post... 
       </div> 
      </div> 
</div> 
</div> 

CSS：

#mainDiv 
{ 
    max-width: 100%; 
    width: auto; 
    min-width: 800px; 
    min-height: 100px; 
    height: auto; 

    margin: 0 auto 300px auto; 

    overflow: hidden; 
} 
#posts 
{ 
    width: auto; 
    height: auto; 
    min-height: 100px; 
    background: #ffffff; 
} 

.post 
{ 
/* Make it square and fit the screen */ 
    width: 33%; 
    height: 33%; 

    display: inline-block; 
    float: left; 
} 
.postDiv 
{ 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-size: cover; 
} 

但它不工作..：

的jsfiddle：https://jsfiddle.net/9qs34mgw/1/

Answer 1

試試這個..

HTML

#mainDiv{height:300px;background-color:#ff8000;} 

#posts 
{ 
display:flex; 
flex-flow:row wrap; 
} 

#post1{width:33%;min-width:400px;min-height:400px;flex-grow:1;} 
#post2{width:33%;min-width:400px;min-height:400px;flex-grow:1;} 
#post3{width:33%;min-width:400px;min-height:400px;flex-grow:1;} 

.postDiv{height:100%;} 

CSS

<div id="mainDiv"> 
<div id="posts"> 
      <div id="post1" class="post"> 
       <div class="postDiv" style="background-color: green"> 
        A bit longer post 
       </div> 
      </div> 
      <div id="post2" class="post"> 
       <div class="postDiv" style="background-color: blue"> 
        Post Post 
       </div> 
      </div> 
      <div id="post3" class="post"> 
       <div class="postDiv" style="background-color: red"> 
        Post... 
       </div> 
      </div> 
</div> 
</div> 

Answer 2

使用Flexbox：

這將產生3個div，甚至間隔和內聯。它們將根據需要自動擴展。它看起來像很多CSS，但這只是因爲我包含了前綴。

HTML

<div class="posts"> 
    <div class="post"></div> 
    <div class="post"></div> 
    <div class="post"></div> 
</div> 

CSS

.posts { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
    -webkit-align-content: stretch; 
    -ms-flex-line-pack: stretch; 
    align-content: stretch; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 
    } 

.post:nth-child(1) { 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

.post:nth-child(2) { 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

.post:nth-child(3) { 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

Answer 3

得到正方形的最簡單方法是使用填充箱絕招：對個別職位（項目）設置height: 0; padding-bottom: 30%; - 這個假設margin-left: 5%;垂直填充是根據父母的寬度，所以padding-bottom: 100%會使得職位divs增長到父母的寬度相同的高度。將底部填充設置爲30％會使盒子長到盒子寬度的100％，形成方形。設置display: inline-block;上的項目和font-size: 0上的父div以刪除使用內嵌塊添加的多餘像素。

* { 
 
    box-sizing: border-box; 
 
} 
 
#mainDiv 
 
{ 
 
    max-width: 100%; 
 
    width: auto; 
 
    min-width: 800px; 
 

 
    margin: 0 auto 300px auto; 
 

 
    overflow: hidden; 
 
} 
 
#posts { 
 
    width: 100%; 
 
    font-size: 0; 
 
    } 
 
    
 
    .post { 
 
     display: inline-block; 
 
     width: 30%; 
 
     font-size: 1rem; 
 
    margin-left: 5%; 
 
     height: 0; 
 
    padding-bottom: 30%; 
 
    background-position: center center; 
 
    background-size: cover; 
 

 

 
    } 
 

 
.post:first-child { 
 
    background: green; 
 
    margin-left: 0; 
 
    } 
 

 
.post:nth-child(2) { 
 
    background: blue; 
 
} 
 

 
.post:nth-child(3) { 
 
    background: red; 
 
    } 
 
.postDiv 
 
{ 
 
    padding: 20px; 
 
    width: 100%; 
 
}

<div id="mainDiv"> 
 
<div id="posts"> 
 
      <div id="post1" class="post"> 
 
       <div class="postDiv"> 
 
        A bit longer post 
 
       </div> 
 
      </div> 
 
      <div id="post2" class="post"> 
 
       <div class="postDiv"> 
 
        Post Post 
 
       </div> 
 
      </div> 
 
      <div id="post3" class="post"> 
 
       <div class="postDiv"> 
 
        Post... 
 
       </div> 
 
      </div> 
 
</div> 
 
</div>